2016-11-30 4 views
0

У меня есть проект, в котором позволяют пользователю для поиска по страны в файле JSon, я изменил структуру моего файла JSON из:Оптимизировать реализация Trie для поиска автозаполнения

{ 
"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> 

Update: утра также пытается ограничить результат 5 предложений. но я тоже застрял.

, пожалуйста, спасибо спасибо.

+0

Ваша новая структура не действует JSON больше. Вы имели в виду использовать массив? – Bergi

+0

@Bergi да точно. –

ответ

0

Я не понимаю, что вы хотите изменить при поиске? Он использует библиотеку triejs для построения древовидной структуры на основе вашего json-файла и метода поиска triejs для поиска результатов на основе ввода. Похоже, он работает.

Чтобы ограничить вывод можно немного изменить функцию карты, как это, например:

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

Я хочу избавиться от стран [id] coz его бесполезно в моем случае @ stee1rat –

+0

@EileenLorant вы имеете в виду, что хотите избавиться от Trie.js? Если это так - вы все равно должны получить действительный json и избавиться от 'var countries =' в countries.json, а затем сами фильтровать результаты. – stee1rat

+0

неважно, я понял это .thanks @ stee1rat –

Смежные вопросы