【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;
        }

 

你可能感兴趣的:(=====前端=====,Angularjs前端)