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"  />    

  

 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; //必须有这个 } });

 

相关文章:

  • 2021-06-25
  • 2021-08-07
  • 2021-04-27
  • 2021-10-27
  • 2022-02-09
  • 2021-10-02
  • 2021-09-16
猜你喜欢
  • 2022-12-23
  • 2021-09-15
  • 2022-12-23
  • 2021-08-16
  • 2022-01-05
  • 2021-06-03
  • 2021-07-18
相关资源
相似解决方案