今天為了做一個頁面模糊查詢的功能折騰了一上午，想了很多種方法，結果無意中發現這個js這個陣列方法，很快的解決了我的問題，特此通過一個小例子記錄下。也希望能幫助大家。

頁面實現效果：

這個查詢其實可以通過與後臺互動查詢結果的，但是因為資料我頁面都已經獲取了不需要再從後臺獲取同時也能提高效能還是通過js來實現吧。

程式碼：

先獲取資料集合放在key陣列中

var key=[];
$(".ajx_data").each(function () {
      $(this).find('li').each(function() {
          key.push($(this).text());
      });
});
 

查詢符合條件的資料事件方法

function searchVehicles(){
        //獲取input輸入框中查詢的條件值
        var vehicle=$("#search").val();
        //用來儲存符合條件的內容
        var filtered;
         if(vehicle!=null && vehicle!=""){
            filtered = key.filter(function(item){
                return item==vehicle;
            });
         }else
 
{
             //查詢條件為空的時候查詢全部資料
             filtered=key;
         }
         //清空已有的li標籤內容，將符合條件的li重新迴圈載入
         $(".ajx_data").children("li").remove();
         for (var i = 0 ; i < filtered.length; i++) {
            $(".ajx_data").append("<li>"+filtered[i]+"</li>");
         }
    }
 

其中filter()語法

var filteredArray = array.filter(callback[, thisObject]);

filteredArray 接收是一個數組，array是一個數組，filte放的是一個函式
符合函式條件的，也就是返回值為true都會放在filteredArray 陣列中。
對於js查詢搜尋比較實用。

當然實現查詢的還有一種方法

function searchVehicles(){
   var vehicle=$("#search").val();
   if(vehicle!=null && vehicle!=""){
       $(".ajx_data").each(function () {
           $(this).find('li').each(function() {
               if($(this).text().indexOf(vehicle)>=0){
                   $(this).show();
               }else{
                   $(this).hide();
               }
           });
       });
   }else{
       $(".ajx_data").each(function () {
           $(this).find('li').each(function() {
               $(this).show();
           });
       });
   }
}

後者可以不改變原有元素的樣式。二者各有利弊，大家可以根據自己的需求來選擇。

很高興等把自己的東西分享出來，有不對的地方還請大家多多指教。