首先需要引入的文件有:
jquery-ui-1.10.4.custom.min.css
jquery-ui-1.10.4.custom.min.js
然后在后台组织json格式的数据,组织成一个list型数据String id;String label;String value;
如:
var availableTagsJSON = [ { label: "C#", value: "C#", id: "1" }, { label: "C++", value: "C++", id: "2" }, { label: "Java", value: "Java", id: "3"}, { label: "JavaScript", value: "JavaScript", id: "4" }, { label: "ASP.NET", value: "ASP.NET", id: "5" }, { label: "JSP", value: "JSP", id: "6" }, { label: "PHP", value: "PHP", id: "7" }, { label: "Python", value: "Python", id: "8" }, { label: "Ruby", value: "Ruby", id: "9" } ];
搜索框input中,
<td align="left"> <input type="text" name="inputer" id="inputer" style="margin-top: 2px;width:200px"/ > <input type="hidden" id="inputerValue" name="inputerValue"/> <select name="selecter" id="selecter" class="select"> <option value="">---请选择---</option> <#list departmentList as dep><#--部门列表--> <option value="${dep.id!}">${dep.name!}</option> </#list> </select> </td> <td align="left" width="190"> <input type="button" style="" id="changeItem" value="下拉"/> </td>
js部分
$(document).ready(function () { var availableTagsJSON = ${deptListBoxJsonList}; $("#inputer").autocomplete({ source: availableTagsJSON, select: function (e, ui) { $(‘#inputerValue‘).val(ui.item.id); //alert(ui.item.id); //alert(ui.item.label) //alert(ui.item.value) } }) $("#changeItem").bind("click", function () { var flag = $("#inputer").is(":visible"); //判断元素显示或隐藏状态 $("#inputer").toggle(1, function () { $("#selecter").toggle(flag); if ($("#changeItem").attr("value") == "下拉") { $("#changeItem").val("输入"); } else { $("#changeItem").val("下拉"); } }); }); }); ps:另一种数据格式
var data = [‘test1‘,‘test2‘,‘test3‘,‘test4‘,‘ietsanders‘];
$("#depName").autocomplete({source:data});
JQuery AutoComplete搜索智能提示,布布扣,bubuko.com
时间: 2024-06-22 00:35:14