ajax json live search не фильтрует результаты

У меня есть форма, которая представляет собой прямой поиск с результатами с помощью json-файла, поэтому, когда я набираю, например, «a», он отображает все контакты в адресной книге, но если я набираю полный фамилия, например, если я набираю кузнец, он все еще показывает все контакты вместо имен, начинающихся с s, а затем любое имя с кузнецом в нем. Как я могу фильтровать эти результаты? Если кто-нибудь может мне помочь, это будет огромная помощь.ajax json live search не фильтрует результаты

EDIT: Образец address.json, как указано в комментариях (отформатирован)

[{ 
    "first_name": "Barbara", 
    "last_name": "Adams", 
    "Picture": "robohash.org/…; ", 
    "phone": "7 - (263) 660 - 4073 ", 
    "address": "878 Schurz Hill " 
}, { 
    "first_name": "Ashley", 
    "last_name": "Bowman", 
    "Picture": "robohash.org", 
    "phone": "1 - (512) 301 - 8791 ", 
    "address": "54 Ruskin Point " 
}]

HTML Содержание:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Index</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <form> 
     <div class="form-group"> 
      <input type="email" class="form-control input-lg" id="search" placeholder="type to search ...."> 
     </div> 
     <div id="results"> </div> 
</form> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script> --> 
    <script> 
    $(window).load(function(){ 
     $('#search').keyup(function(){ 
      var searchField = $('#search').val(); 
      var output = '<div class="row">'; 
      var count = 1; 
      $.getJSON('address.json', function(data) { 
        console.log(data); 

       $.each(data, function(key, val){ 


        output += '<div class="col-md-6 well">'; 
        output += '<div class="col-md-3"><img class="img-responsive" src="'+val.picture+'" alt="'+ val.first_name +'" /></div>'; 
        output += '<div class="col-md-7">'; 
        output += '<h5>' + val.first_name + '</h5>'; 
        output += '<h4>' + val.last_name + '</h4>' 
        output += '</div>'; 
        output += '</div>'; 
       }); 
       output += '</div>'; 
       $('#results').html(output); 
      }); 
     }); 
     }); 


    </script> 
    </body> 
</html>

источник

2016-11-22 Dan Stewart

Не могли бы вы опубликовать пример address.json? –

И где вы собираетесь фильтровать результаты? Это на UI (js) или Backend (сервер) –

Я намерен сделать это через UI –

Наиболее очевидное решение, учитывая, что вы заинтересованы в фильтрации через пользовательский интерфейс будет использовать Regular expressions.
Существует более одного способа использовать regular expressions, хотя он полностью зависит от ваших требований.

Вот начало

Я использую минимальный фрагмент кода, так что я удалил большую часть неиспользуемого кода.
Прослушивание события изменения поля ввода.
Поиск по first_name объекта здесь

var sampleJson = [{ 
 
    "first_name": "Barbara", 
 
    "last_name": "Adams", 
 
    "Picture": "robohash.org/…; ", 
 
    "phone": "7 - (263) 660 - 4073 ", 
 
    "address": "878 Schurz Hill " 
 
}, { 
 
    "first_name": "Ashley", 
 
    "last_name": "Bowman", 
 
    "Picture": "robohash.org", 
 
    "phone": "1 - (512) 301 - 8791 ", 
 
    "address": "54 Ruskin Point " 
 
}]; 
 

 
function filterAddress(filterResult) { 
 
    output = ''; 
 
    $.each(filterResult, function(key, val) {  
 
    output += '<div>'; 
 
    output += '<h5>' + val.first_name + "&nbsp" + val.last_name + '</h5>'; 
 
    output += '<h4>' + '</h4>' 
 
    output += '</div>'; 
 
    }); 
 
    output += '</div>'; 
 
    $('#results').html(output); 
 
} 
 

 
$(document).ready(function() { 
 
//load your JSON just once as we are going to iterate over the same JSON as per your comments. No need to load it more than once as you are only searching through this array. 
 
    $('#search').on('change', function(e) { 
 
    filterAddress(executeSearch($('#search').val())); 
 
    }); 
 
}); 
 

 
function executeSearch(queryStr) { 
 
    var results = []; 
 
    if (queryStr === null || queryStr == "") { 
 
    return results; 
 
    } 
 
    var pattern = new RegExp('^' + queryStr, 'i'); 
 
    $.each(sampleJson, function(key, val) { 
 
    if (pattern.test(val.first_name)) { 
 
     results.push(val); 
 
    } 
 
    }); 
 
    return results; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="search"> 
 
<br> 
 
<div id="results">Results Appear here</div>

источник

2016-11-23 18:21:30

все еще не работает. Я вынул другой код и поместил его в скрипт, верно ли это? –

Как я упоминал в сообщении, этот код не будет работать для вас как есть, так как он не загружает JSON. Вам нужно выяснить способ подгонки этого кода в ваш и намек: это действительно простая задача. Могу ли я узнать, что у вас есть, чтобы исправить свой код, используя мою демо? Простая копия-паста не даст вам желаемого результата. Моя демонстрация делает тяжелую работу, но вам нужно ее настроить. Пожалуйста, дайте мне знать, что вы сделали, - где вы застряли и какая ошибка, с которой вы столкнулись. –

ajax json live search не фильтрует результаты

ответ

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