EasyAutocomplete用于实时搜索的jquery插件,下拉提示框覆盖了它周围的输入字段

时间:2016-04-05 10:32:10

标签: javascript jquery html autocomplete easyautocomplete

当我在location中搜索时,问题出现,然后其下拉建议与输入字段下方重叠。

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>

此脚本触发搜索框的自动完成功能,并显示jason文件中的建议,当它出现时,会在问题发生的位置输入框下方生成一个下拉列表。

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"}
]

0 个答案:

没有答案