JQuery AutoComplete搜索智能提示

浏览数：21 / 时间：2015年06月09日

首先需要引入的文件有：

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搜索智能提示,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQuery AutoComplete搜索智能提示