The problem comes when I search in location
, then its dropdown suggestions overlaps below input fields.
home.php
<form>
<label for="contact-name">Contact Name:</label>
<input type="text"/>
<label for="contact-no">Contact No:</label>
<input type="number"/>
<label for="place">Location:</label>
<!--problem area from here-->.
<input type="text" id="locate"name="location" />
<script src="live_search.js"></script>
<label for="size">Size:</label>
<input type="text" />
<label for="price">Price:</label>
<input type="number" />
<label for="rent">Rent/Monthly:</label>
<input type="number"/>
<button type="submit" name="submit-data">Submit</button>
</form>
This script triggers the autocomplete function for searchbox and displays the suggestions from jason file and when it does, it makes a dropdown below input box of location where the problem occurs.
live_search.js
var options = {
url: "location.json",//goto location.json
getValue: "location",//get the value of the object with name=location
list: {
match: {
enabled: true
}
}
};
$("#locate").easyAutocomplete(options);
location.json
[
{"location":"wapda town"},
{"location":"gulberg"},
{"location":"valencia"},
{"location":"gulshan e iqbal"},
{"location":"iqbal avenue"},
{"location":"architect society"},
{"location":"garden town"},
{"location":"defence"},
{"location":"Faisal Garden"},
{"location":"Faisal Town"},
{"location":"Faisalabad"}
]