优化TRIE实现以搜索自动完成

我有一个项目，让用户在json文件中查找国家/地区我从以下方式更改了JSON文件的结构。

{
"AE": {"name": "United arab emirates","alternate": "UAE"},
"GB": {"name": "United kingdom","alternate": "Great Britain England","weight": "2.5"},
"US": {"name": "United states","alternate": "USA United States of America","weight": "3.5"},
.........
}

这个结构：

var countries = {
"name": "United arab emirates","alternate": "UAE",
"name": "United kingdom","alternate": "Great Britain England","weight": "2.5",
"name": "United states","alternate": "USA United States of America","weight": "3.5",
.........
}

，但我无法弄清楚如何编辑JS代码与JSON新结构合作的权利，

这是我的代码：nistry.js：

(function () {
  'use strict';
  // var log = console.log.bind(console);
  // No timing in IE (sucker)
  if(!console.time) {
    console.time = console.timeEnd = function() {};
  }
  var countries, index;
  function indexData() {
    index = new T.Index({
      'name' :'countries',
      'indexSubstring': false,
      'intersectResults': true
    });
    console.time('loading');
    index.load(function(err) {
      if(err) {
        console.time('indexing');
        Object.keys(countries).forEach(function(id) {
          var country = countries[id];
          var toIndex = [country.name , country.alternate].join(' ');
          index.add(id, toIndex, country.weight || 1);
        });
        console.timeEnd('indexing');
        console.time('saving');
        index.save(function() {
          console.timeEnd('saving');
        });
      }
      else {
        // Already loaded
        window.index = index;
        console.timeEnd('loading');
      }
    });
  }
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if(request.readyState === 4) {
      // Break the cyclic reference
      request.onreadystatechange = null;
      if (typeof request.responseText === "string") {
        try {
          countries = JSON.parse(request.responseText);
        } catch(e) {
          // do something
        }
        // Index, if data was loaded
        if(countries) {
          indexData();
        }
      }
    }
  };
  request.open('get', 'data/countries.json', true);
  request.send();
  var search = document.getElementById('search');
  var results = document.getElementById('results');
  var lastVal;
  function lookup() {
    var query = search.value;
    if(lastVal === query) {
      return;
    }
    // Time the lookup
    console.time('lookup: ' + query);
    var ids = index.search(query);
    console.timeEnd('lookup: ' + query);
    // render the list
    results.innerHTML = ids.map(function(id) {
      var country = countries[id];
      return '<li rel="' + id + '">' + country.name + '</li>';
    }).join('');
    lastVal = query;
  }
  search.addEventListener('keyup', lookup, false);
}).call(null);

countrion.html：

<html>
<head>
  <title>Trie.js</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!--- trie-structure implementation ---->
  <script type="text/javascript" src="https://rawgit.com/wunderlist/trie.js/master/dist/trie.js"></script>
</head>
<body>
  <label>Type in a country name</label>
  <input id="search" autocomplete="off" autofocus="autofocus" />
  <ul id="results" />
  <script type="text/javascript" src="js/countries.js"></script>
</body>
</html>

更新：我还试图将结果限制为5个建议。但是我也被卡住了。

请帮助谢谢。

我不明白您想在搜索中更改什么？它使用Triejs库基于您的JSON文件来构建树结构，并根据输入来找到结果。看起来它有效。

为了限制输出，您可以像这样稍微更改地图功能，例如：

results.innerHTML = ids.map(function(id, i) {
  var country = countries[id];
  if (i < 5) {
     return '<li rel="' + id + '">' + country.name + '</li>';
  }
 }).join('');

相关内容

最新更新

热门标签：