输入智能的匹配控件awesomplete

官方文档参考
            http://leaverou.github.io/awesomplete/

首先引用awesomplete.css、awesomplete.js这两个文件

  <link href="@Url.Content("~/lib/awesomplete/awesomplete.css")" rel="stylesheet" type="text/css">
    <script src='@Url.Content("~/lib/awesomplete/awesomplete.js")' type="text/javascript"></script>

 

 <input id="ajax-example" class="awesomplete form-control" />再此控件上设置样式awesomplete

固定的匹配

<input autofocus class="awesomplete form-control" data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails,云儿,云朵,心云" />

测试ajax获取数据：
       

    <input id="ajax-example" class="awesomplete form-control" />

  <script type="text/javascript">

    var d = document.querySelector("#ajax-example");
    console.log(d)
    var ajax = new XMLHttpRequest();
    ajax.open("GET", "https://restcountries.eu/rest/v1/lang/fr", true);
    ajax.onload = function () {
        console.log(ajax.responseText);
        var list = JSON.parse(ajax.responseText).map(function (i) { return i.name; });
        //console.log(list);
        new Awesomplete(document.querySelector("#ajax-example"), { list: list });
    };
    ajax.send();

</script

运用到实际项目中

  <div class="row" style="padding-top:10px;">
        <div class="col-sm-6">
            物料编号：
            <input id="materialNo" col="MaterialNo" class="awesomplete form-control" type="text" onkeypress="EnterPress(event)" onkeydown="EnterPress()" />
        </div>
    </div>

  <script>
        var aweMaterial = new Awesomplete(document.querySelector("#materialNo"), {
        replace: function (suggestion) {
            this.input.value = suggestion.label;
        }
    });
    function EnterPress(e) { //传入 event
        var e = e || window.event;
        if (e.keyCode == 13) { //13代表回车符
            //TO_DO按下回车键后的动作
            getMaterialNo();
        }
    }
        function getMaterialNo() {
            var tempObj = $("#materialNo").val();
            if (tempObj == null || tempObj == "") {
                ys.msgError("请输入您要变更的物料编号");
                return false;
            }
             ys.ajax({
                 url: '@Url.Content("~/BusinessManage/Material/GetMaterialNoListJson")',
                 type: "post",
                 data: { "materialNo": $("#materialNo").val() },
                 success: function (obj) {
                     if (obj.Tag == "1") {
                         if (obj.Result != null) {
                             var items = [];
                             $.each(obj.Result, function (index, item) {
                                 items.push({ label: item.MaterialNo, value: item.Id });
                             });
                             aweMaterial.list = items;
                         }
                     }
                 }
             });
      }
    </script>

初始化定义，根据自己的需求来

 var aweMaterial = new Awesomplete(document.querySelector("#materialNo"), {
        // insert label instead of value into the input.
        replace: function (suggestion) {
            this.input.value = suggestion.label;
        }
    });

输入数据按下回车键绑定并显示数据

  function getMaterialNo() {
            var tempObj = $("#materialNo").val();
            if (tempObj == null || tempObj == "") {
                ys.msgError("请输入您要变更的物料编号");
                return false;
            }
             ys.ajax({
                 url: '@Url.Content("~/BusinessManage/Material/GetMaterialNoListJson")',
                 type: "post",
                 data: { "materialNo": $("#materialNo").val() },
                 success: function (obj) {
                     if (obj.Tag == "1") {
                         if (obj.Result != null) {
                             var items = [];
                             $.each(obj.Result, function (index, item) {
                                 items.push({ label: item.MaterialNo, value: item.Id });
                             });
                             aweMaterial.list = items;
                         }
                     }
                 }
             });
      }