ajax json實時搜索不會過濾結果

我有一個表單，用json文件進行結果搜索，所以當我輸入例如'a'時，它會調出地址簿中的所有聯繫人，但如果我輸入完整姓氏例如，如果我鍵入smith，它仍然顯示所有聯繫人，而不是以s開頭的名稱，然後是帶有smith的任何名稱。我怎樣才能過濾這些結果？如果任何人都可以幫助我，那將會有很大的幫助。ajax json實時搜索不會過濾結果

編輯：樣品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

對象的FIRST_NAME搜索能否請您發表樣本address.json？ –

你打算如何過濾結果？它是在用戶界面（JS）或後端（服務器） –

我打算通過UI –

最明顯的解決方案考慮到你有興趣過濾通過UI將使用Regular expressions。
雖然有多種方式可以使用regular expressions，但它完全取決於您的要求。

這裏是一個開始

我使用的是最小的片段，所以我已經去除了大部分未使用的代碼。
收聽輸入字段的變化事件。
通過這裏

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實時搜索不會過濾結果

回答

相關問題