3

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"}
]
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
Saad Basit
  • 43
  • 1
  • 5

0 Answers0