Question

我有一个项目，让用户在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新结构

这是我的代码： countries.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);

countries.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个建议。但我也被卡住了。

请帮助谢谢。

优化实施以搜索自动完成

0 个答案: