jquery.autocomplete自动补齐和自定义格式

最新推荐文章于 2022-11-28 13:22:37 发布

转载最新推荐文章于 2022-11-28 13:22:37 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zeroes/p/5542233.html

文章标签：

#ui #javascript #java #ViewUI

本文介绍了如何使用jQuery的自动补全插件实现输入框的自动提示功能，包括基本配置、数据源设置及自定义显示内容的方法。示例中展示了如何利用本地数据源和远程API提供自动补全选项，并提供了具体的代码实现。

1.简单的下拉自动补齐,可以使用本地或远程数据源

    <input name="autoTag" id="autoTag" />

 var source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];

 $('#autoTag').autocomplete({source: source});

source也可以指向后台的一个方法：

   $('#autoTag').autocomplete({
            source: '@(Url.Action("AutoCompleteOrderCode"))',
            select: function (event, ui) {
              //  getFriendInfo(ui.item.value);
            }
        });

        //自动匹配合同编号
        [HttpGet]
        public ContentResult AutoCompleteOrderCode(string term)
        {
            var service = new ProjectService();
            var cmpOrderList = service.AutoCompleteCmpOrder(UserContext.Current.TenantId,term);
            var content = "[" + string.Join(",", cmpOrderList.Select(q => "\""+ q.CmpSoCode+"\"")) + "]";
            return new ContentResult(){Content = content};
        }

2.自定义数据格式，包括id和text

  <input name="autoTag" id="autoTag" /> <input type="hidden" id="autoTagId" />

 var source = [{ value: "1", label: "C++" }, { value: "2", label: "java" }, { value: "3", label: "javascript" }, { value: "4", label: "ruby" }];


$('#autoTag').autocomplete({
            source: source,
            minLength: 0,
            focus: function (event, ui) {
                $("#autoTag").val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $('#autoTag').val(ui.item.label);
                $('#autoTagId').val(ui.item.value);
                return false; //必须有这个
            }
        });