創建json屬性值的部分搜索

您好，我想知道是否有可能在json數據的給定屬性中應用部分搜索。我想要做的是，如果我把我的投入說「江淮」然後，它將搜索我的JSON數據類似的串像雅各，傑克，傑奎琳等。這裏是我的代碼：創建json屬性值的部分搜索

var data = [{ 
    "RM_Name": "Russ Martin", 
    "Division": "East", 
    "RM_Phone": "(603) 491-1259", 
    "RC_Name": "Jacob Sucoff", 
    "RC_Phone": "(800) 247-4154 x3403", 
    "States_Covered": "MT,VT, NH, ME (all firms)", 
    "Latitude": 46.6797995, 
    "Longitude": -110.044783, 
    "Coordinates": "46.6797995,-110.044783" 
}, { 
    "RM_Name": "Carey Fortnam", 
    "Division": "East", 
    "RM_Phone": "(585)-259-7394", 
    "RC_Name": "Matt Wrzesniewsky", 
    "RC_Phone": "(800) 247-4154 x3088", 
    "States_Covered": "NY- Upstate ex Rockland County (BD, FP)", 
    "Latitude": 40.7056308, 
    "Longitude": -73.9780035, 
    "Coordinates": "40.7056308,-73.9780035" 

}]; 
     $.each(data, function(i, item) { 
      var rm_name = item.RM_Name,division = item.Division,rm_phone = item.RM_Phone,rc_name = item.RC_Name,rc_phone = item.RC_Phone,states = item.States_Covered; 

      var dataset='<tr class="'+rm_name+' '+rc_name+'"><td>'+rm_name+'</td><td>'+division+'</td><td>'+rm_phone+'</td><td>'+rc_name+'</td><td>'+rc_phone+'</td><td>'+states+'</td></tr>'; 

      $('.rm-data').append(dataset); 
     }); 


    $('#search').on('keypress', function (e) { 
     if(e.which == 13){ 
      var query = $('#search').val(); 

      $('.rm-data tr').hide(); 
      $('.error-msg').hide(); 

      if ($('.rm-data tr').hasClass(query)) { 
       $('.rm-data tr:contains(' + query + ')').fadeIn('slow', function() { 
        $('.rm-data tr:contains(' + query + ')').slideDown().show(); 
       }); 
      } 

      else { 

       var error = '<div class="error-msg">Contact Not Found</div>'; 
       $('.rm-table-search').append(error); 
       if ($('.error-msg').length == 0) { 
        $('.rm-table').append(error); 
       } 
       else { 
        $('.rm-table').append(''); 
       } 

      }    
     } 
    });

和鏈接我Fiddle

來源

2014-05-02 a_miguel6687

從其他點稱爲是'如果（$（」 .rm-data tr'）。hasClass（query））'必要？你正在給'tr'多個類，所以你給的不是一類'Russ Martin'，而是一類'Russ'和一個單獨的'Martin'類。 – Matt

@Matt是的，它可以搜索Firstname或Lastname，而不是在搜索時只接受全名字符串 –

但是您後來運行'$（'.rm-data tr：contains（'+ query +'）' ）'，它將重新檢查tr的內容（無論名字或姓氏）。 [這個小提琴]（http://jsfiddle.net/HEdc2/30/）省略了有條件的類，並且仍然完成搜索。 – Matt

我會做這樣的事情：

演示：your fiddle updated

我所做的：

添加引導第2版樣式
添加引導第2節的Javascript
使用Bootstrap Typeahead展現一個漂亮的下拉菜單，當你搜索姓名
更新你的代碼來處理空搜索
加入change事件搜索輸入

事先鍵入的內容：

var typeaheadData = [];  // initializer 
typeaheadData.push(rm_name); // in your each loop 
$('#search').typeahead({  // append source to typeahead plugin 
    source: typeaheadData });

空搜索

if(query === "") 
{ 
    $('.rm-data tr').show(); 
    return; 
}

事件

.on('change', function (e) { 
    search(); 
});

我也提取的搜索部分爲search方法，這樣我們就可以在代碼

來源

2014-05-02 12:53:27 balexandre

這很好，但我想知道如果我可以使用jquery，但只有 –

肯定會這樣做，但它會讓你工作更多，這裏有很多插件，因爲我使用Bootstrap工作了很多，但你應該使用一個插件。你需要完整的CSS（用於下拉菜單）和crosbrowser，然後所有'typeahead'正在做的就是查看它的數組，並在下拉菜單中顯示結果...該部分很容易:) – balexandre

你可以擁有鍵入[沒有完整的Bootstrap]（https://github.com/twitter/typeahead.js/）。得到他們從[這個答案]（http://stackoverflow.com/a/17904021/28004）。 – balexandre

創建json屬性值的部分搜索

回答

相關問題