JavaScript结合ArcGIS地图服务实现的搜索建议框

因项目功能需要，开发一个类似百度的那种搜索建议框，即通过输入的关键字进行匹配提示。不要求进行智能推荐，只要返回包含该关键字的若干条结果就行。效果大致如下：

初步的想法是利用第三方插件来做。进行过如下尝试。

1.使用autocomplete.js（自动完成）

某第三方autocomplete插件是这样写的（省略部分代码）：

(function ($) {
  $.fn.autocomplete = function (params) {
      //Selections
      var currentSelection = -1;
      var currentProposals = [];
      //Default parameters
      params = $.extend({
          hints: [],
          //placeholder: 'Search',
          width: 200,
          height: 16,
          showButton: true,
          buttonText: 'Search',
          onSubmit: function (text) {
          },
          onBlur: function () {
          }
      }, params);
	  
	  ...
	  
	}
})

调用方式类似如下：

var xxxValues=['xxxa','xxxb','xxxc']
$('#xxxDiv').autocomplete({
  hints: xxxValues
})

这种方式对于搜索的结果集较小时是适用的，可以先将所有可能的结果查询出来，预先放到数组中，然后进行一次初始化即可。如下：

但对本项目，由于结果数据量太大，这种方式不合适。应当能够根据关键字进行动态查询，从建议库服务中动态获取搜索建议并填充下拉列表。于是另外找可以动态填充的插件。

2.使用typeahead.js（可以根据搜索建议库进行自动补全的插件）

该插件与autocomplete相比，其长处在于可以动态获取搜索建议，可对多个字段进行模糊匹配，及指定展示的字段，效果如下：

然而，由于ArcGIS地图服务的搜索结果（JSON）有自己的组织方式，我们要进行匹配的字段位于结果的features的attributes的指定字段中，如下：

如果不指定展示字段，使用默认的展示方式，结果可能像下面这个样子（忽略样式）：

也就是说，对像下面这样的结果：

{
    "displayFieldName": "bsm",
    "fieldAliases": {
        "MC": "MC"
    },
    "fields": [
        {
            "name": "MC",
            "type": "esriFieldTypeString",
            "alias": "MC",
            "length": 254
        }
    ],
    "features": [
        {
            "attributes": {
                "MC": "龙岩市民源汽车发展有限公司"
            }
        },
        {
            "attributes": {
                "MC": "龙岩市民商法律事务所"
            }
        },
        {
            "attributes": {
                "MC": "龙岩市民政局"
            }
        },
        {
            "attributes": {
                "MC": "龙岩市民族与宗教事务局"
            }
        },
        {
            "attributes": {
                "MC": "龙岩市民宗局"
            }
        },
        {
            "attributes": {
                "MC": "龙岩市民爆协会"
            }
        },
        {
            "attributes": {
                "MC": "龙岩市民爆协会培训中心"
            }
        }
    ]
}

它展示的是整个JSON转化成字符串后的结果，而不是指定字段。并且，我们不想因为这样一个简单的功能而引入过多的插件。

于是，转而决定自行实现。

思路如下：

监听搜索关键字输入框的keyup事件，如输入不合法（如为空）时清空搜索建议列表（如果已有的话），否则，调用地图服务的搜索功能，根据输入的关键字进行查询，返回前10条结果并填充列表。选中列表中的任意一条结果时，将结果填充到搜索建议框中，并清空搜索建议列表。

核心代码如下：

1.输入框事件响应部分

      $('#inputFromWhereKeyword').keyup(function () {
        var _this = this
        var divInput = $('#inputFromWhereKeyword')[0]
        if (!divInput) {
          return
        }

        var divList = $('#listSearchedAddress')[0]
        if (!divList) {
          return
        }

        _this.divInput = divInput
        var keyword = divInput.value
        if (!keyword || 0 == keyword.replace(' ', '').length) {
          while(divList.hasChildNodes()){
            divList.removeChild(divList.firstChild)
          }
          return
        }

        Promise
          .all([_this.getAddress(keyword)])
          .then(function (results) {
            var result = results[0]

            if (!result || 0 >= String(result).replace(' ', '').length || null == result) {
              while(divList.hasChildNodes()){
                divList.removeChild(divList.firstChild)
              }
              return
            }

            var listInnerHtml = ''
            result.forEach(function (data, index) {
              var anInnerHtml = '<div style="background-color:rgba(255,255,255,0.8);"><li x=' + data.geometry.x +
                ' y=' + data.geometry.y + '><span>' + (index + 1) + '</span><span>' + data.value + '</span></li></div>'
              if (listInnerHtml) {
                listInnerHtml += anInnerHtml
              }else {
                listInnerHtml = anInnerHtml
              }
            })
            if (listInnerHtml) {
              divList.innerHTML = listInnerHtml
            }
            divList.onclick = function (event) {
              var tmpNode = event.target
              var targetNode = (0 == tmpNode.children.length) ? tmpNode.parentNode : tmpNode
              if ('LI' != targetNode.localName && 'li' != targetNode.localName) {
                return
              }
              var x = targetNode.attributes.x.value
              var y = targetNode.attributes.y.value

              _this.divInput.setAttribute('x', x)
              _this.divInput.setAttribute('y', y)

              _this.divInput.value = targetNode.children[1].innerText

              while(divList.hasChildNodes()){
                divList.removeChild(divList.firstChild)
              }
            }
          })
      }.bind(this))

2.获取搜索建议结果部分

    getAddress: function (keyword) {
      var p = new Promise(function (resolve, reject) {
        if (!keyword || 0 == keyword.trim().length) {
          console.log('resolve with no records')
          resolve(' ')
        }else {
          var targetField = 'MC'
          var query = new Query(this.addressNameServiceLayer)
          query.returnGeometry = true
          query.where = targetField + " like '%" + keyword + "%'"
          query.outFields = ['Shape', targetField]

          var queryTask = new QueryTask(this.addressNameServiceLayer)
          queryTask.execute(query).then(function (result) {
            var values = []
            if (!result || result.features.length <= 0) {
              reject('no records')
            }
            var features = result.features
            if (!features) {
              reject('bad result')
            }
            var len = features.length
            var count = len > 10 ? 10 : len
            var index = 0
            for (;index < count;index++) {
              var aFeature = features[index]
              var aResult = aFeature.attributes[targetField]
              if (aResult) {
                var aValue = {
                  value: aResult,
                  geometry: aFeature.geometry
                }
                values.push(aValue)
              }
            }
            if (0 == values.length) {
              reject('empty result')
            }
            resolve(values)
          })
        }
      }.bind(this))
      return p
    },

最终达到的效果如下：

1.输入关键字时，动态推荐结果

2.选中一条结果后，建议列表隐藏