首页 > 代码库 > JQuery AutoComplete搜索智能提示

JQuery AutoComplete搜索智能提示

2024-07-10 10:46:14   224人阅读

首先需要引入的文件有：

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 = http://www.mamicode.com/[‘test1‘,‘test2‘,‘test3‘,‘test4‘,‘ietsanders‘];
$("#depName").autocomplete({source:data});

 

　　

 


联系
我们