Hello!

How to use Javascript / jQuery to make sure that when you enter a word in the search string, the data inside the <div> filtered by the first letters? https://jsfiddle.net/0sa40u4f/

For example, we introduce the letter 'A', the following names must remain: 'Anastasia, Alexander, Andrey', the rest will disappear.

If we introduce the next letter, we get the phrase 'An', then there will be two names: 'Anastasia, Andrew'.

And so on, a filter is produced based on the available data.

 Маска для поиска: <input type="text" ng-model="search" /> <div id="name"> <ul> <li> <a href="#">Анастасия</a> </li> <li> <a href="#">Александр</a> </li> <li> <a href="#">Борис</a> </li> <li> <a href="#">Андрей</a> </li> <li> <a href="#">Павел</a> </li> </ul> </div>

    1 answer 1

     function init(){ let template = `<li><a href="#">%name</a></li>`, search = document.querySelector('#search'), list = document.querySelector('#list'), names = ['Анастасия', 'Александр', 'Борис', 'Андрей', 'Павел'], render = a => list.innerHTML = a.map(e => template.replace('%name', e)).join(`\n`); search.addEventListener('input', function(e){ let value = search.value.toLowerCase(); render(names.filter(e => e.toLowerCase().startsWith(value))); }); render(names); } //document.addEventListener('DOMContentLoaded', init); init(); 
     Маска для поиска: <input type="text" ng-model="search" id='search' /> <div id="name"> <ul id='list'> </ul> </div>

    Judging by the ng-model attribute, AngularJS used.
    Then I will not be afraid to send to the documentation .

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-init="names = [ 'Анастасия', 'Александр', 'Борис', 'Андрей', 'Павел' ];"> Маска для поиска: <input type="text" ng-model="search" /> <div id="name"> <ul> <li ng-repeat="name in names | filter:search"> <a href="#">{{ name }}</a> </li> </ul> </div> </div>

    Fiddle

    • the example of an angular is not looking at the beginning of the line, but across the entire line - Grundy
    • @Grundy, you are observant as always. But the main thing was to remind about filters. - user207618
    • @Other Tell me, please, is it possible to do without the name array? Because the data in the output in <li></li> dynamic and always different. Thank! - Pavel
    • one
      @Pavel, there are only names . It is possible without it - every time to access the list, pull out names and search in them, only an appeal to the DOM is very expensive in time and resources. The golden mean here is to get the data in the list ( ul>li ) and add them to the names array, for the sake of optimization. - user207618
    • @Other, Thanks for the reply! It turned out to be placed in an array, it works fine. Tell me, please, is it possible to translate English letters into Russian? For example, if a user has an English keyboard layout, and he enters the Russian name "Fyfcnfcbz" (Anastasia), so that this name is displayed in Russian using typed English letters. - Pavel