【angularjs】文本框模糊查詢時下拉自動補全

實現功能：

       在文本框中輸入某個字符a，把目標集合中包含a字符的記錄全部在文本框下方下拉顯示

思路：

       1.利用xml，將目標集合中包含輸入字符的記錄查出來

       2.將輸入的字符匹配1.中查出來的集合對應字段值，並保存該字段值

       3.拼接對應字段，下拉顯示

JS代碼：

                  var strDefID = "";
                  self.strwhere1 = "{ID}='Strand' and {MaterialTypeName}=N'在製品'";
                  $('#WinderCode').typeahead({//元素必須有對應id，id="CoMaterialID" ng-model="vm.CoMaterialID"

                      source: function (query, process) {
                          return $.ajax({
                              type: "post",
                              url: "mom.situi/handler/Public.ashx?ajaxMethod=AutoCompleteByXML&xmlID=PDEFM_10004_3&strWhere=" + self.strwhere1 + "&strText=DefID&strValue=DefName&txtQuery=" + query,//
                              dataType: "json",
                              success: function (data2) {
                                  var item = [];
                                  var resultList = data2.map(function (item) {
                                      var aItem = { Value: item.value, Text: item.label };
                                      return JSON.stringify(aItem);
                                  });
                                  return process(resultList);
                              }
                          });
                      },
                      matcher: function (obj) {
                          var item = JSON.parse(obj);
                          return item.Text.toLowerCase().indexOf(this.query.toLowerCase()) + 1;
                      },
                      highlighter: function (obj) {
                          var item = JSON.parse(obj);
                          //return item.Value + "【" + item.Text + "】";
                          strDefID = item.Text;
                          return item.Text + "【" + item.Value + "】";
                      },
                      updater: function (obj) {
                          var item = JSON.parse(obj);
                          $('#WinderCode').val(item.Text).trigger('change');//angularjs可綁定
                          strDefID = item.Text;
                          return item.Text + "【" + item.Value + "】";
                      }
                  });

調用方法：

            string xmlID = context.Request["xmlID"].ToString();
            string query = context.Request.QueryString["txtQuery"];
            string strText = context.Request["strText"].ToString();
            string strValue = context.Request["strValue"].ToString();
            string xmlUrl = HttpRuntime.AppDomainAppPath + "mom.situi\\ConfigXml\\Grid.xml";
            string strWhere = "";
            if (context.Request["strWhere"] != null)
            {
                strWhere = context.Request["strWhere"].ToString();
            }
            if (strText != "")
            {
                string where = strWhere == "" ? "{" + strText + "} like N'%" + query + "%'" : strWhere + " and {" + strText + "} like N'%" + query + "%'";
                strWhere = where;
            }
            PDEFMPublicBus publicBus = new PDEFMPublicBus();
            string json = publicBus.getKeyValueData("AutoComplete", xmlUrl, xmlID, "SelectExt", strWhere, strValue, strText);
            context.Response.Write(json);
        

        public string getKeyValueData(string ControlType, string xmlUrl, string xmlID, string serviceName, string strWhere, string value, string name)
        {
            string strResult = "[]";
            ConfigXmlRead xml = new ConfigXmlRead();
            string xmlServer = xml.readXMLtoServer(xmlUrl, xmlID);
            string[] arrXmlServer = xmlServer.Split('@');
            string virtualEntity = arrXmlServer[0];
            string strBreadType = arrXmlServer[1];
            string strClassType = arrXmlServer[2];
            string orderby = arrXmlServer[3];
            SITSelectReturnValue sITSelectReturnValue = SelectExAction.SelectExt(virtualEntity, strBreadType, strClassType, orderby, -1, -1, strWhere, serviceName);
            DataSet ds = sITSelectReturnValue.SelectDataSet;
            if (ControlType == "DDList")
            {
                strResult = Jackson.DefaultddlJson(ds, value, name);

            }
            else if (ControlType == "AutoComplete")
            {
                strResult = Jackson.AutoddlJson(ds, value, name);
            }
            return strResult;
        }

        public static string AutoddlJson(DataSet ds, string value, string name)
        {
            string json = "[";
            if (ds != null && ds.Tables.Count > 0)
            {
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    json = json + "{\"label\":";
                    json = json + "\"" + ds.Tables[0].Rows[i][name] + "\" ,";
                    json = json + "\"value\":";
                    json = json + "\"" + ds.Tables[0].Rows[i][value] + "\" ,";
                    json = json + "\"SettingDefault\":";
                    if (i == 0)
                    {
                        json = json + "\"true\"";
                    }
                    else
                    {
                        json = json + "\"false\"";
                    }
                    if (i == ds.Tables[0].Rows.Count - 1)
                    {
                        json = json + "}";
                    }
                    else
                    {
                        json = json + "},";
                    }

                }
            }
            json = json + "]";
            return json;
        }