首先需要引入的文件有：
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});