2016-07-09 8 views
0

ユーザーが入力したすべての入力からハウス名を検索したいと思います。 したがって、ユーザーの詳細は次のとおりです。javascriptのjsonオブジェクトから文字列を検索したい

[{"houseName": "man"、 "houseType": "ヴィラ"、 "houseFloors": "7"、 "houselocation": "Seattle"}、{" ]、[houseLocation]: "two"、 "houselocation": "DC"}]

私が男性として検索を提供する場合は、

[{ "houseName": "男"、 "houseType": "別荘"、 "houseFloors": "7"、 "houselocation": "シアトル"}]:

コードとしてあります

<html> 
<head> 
<title>JavaScript</title> 
</head> 

<body> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<label>House Name 
    <input type='text' name='houseName' id='houseName' placeholder="House Name"> 
</label> 
<br> 
<br> 
<label>House type 
    <input type='text' name='houseType' id='houseType' placeholder="House type"> 
</label> 
<br> 
<br> 
<label>House Floors: 
    <input type='text' name='houseFloors' id='houseFloors' placeholder="House Floors"> 
</label> 
<br> 
<br> 
<label>House Location: 
    <input type='text' name='houselocation' id='houselocation' placeholder="House Location"> 
</label> 
<br> 
<br> 
<div> 
<label>search: 
    <input type="text" name="search" id="search-input" placeholder="search"> 
    <input type="submit"> 
</div> 
<button type="button" id="add">Add Details</button> 
<button type="button" id="print">Show</button> 

<pre></pre> 
<script> 
    var list = [], 
    $ins = $('#houseName, #houseType, #houseFloors, #houselocation'), 
    var counter = { 
    houseName: {}, 
    houseType: {}, 
    houseFloors: {}, 
    houselocation: {} 
    }; 

$('#add').click(function() { 
    var obj = {}, 
    valid = true; 
    $ins.each(function() { 
    var val = this.value; 
    if (val) { 
     obj[this.id] = val; 
    } else { 

     alert(" Cannot be blank"); 

     return false; 
    } 
    }); 
    if (valid) { 
    list.push(obj); 
    $ins.val(''); 

    } 
}); 

$('#print').click(function() { 
    $('pre').text(JSON.stringify(list) + '\n\n'); 

}) 
var keyword = $('#search-input').val(); 
var filteredList = list.filter(function(user){ 
    return user.houseName === 'man'; // Or u can use indexOf if u want check if the keyword is contained 
}); 


</script> 

</body> 

</html> 

答えて

2

Array.prototype.filterを使用することができます。

//The follow code should be executed when u are going to do the 'search' action 
//It could be an click on a button, or just in a listener which is triggered when the search box fires 'change' events 

//First u need to get the keyword from the search input box: 
var keyword = $('#search-input').val(); 

//maybe do some value check 
//if (keyword === '') return; 

//then get the filtered List 
var filteredList = list.filter(function(user){ 
    return user.houseName === keyword; 
}); 

//Finally update the UI based on the filtered List 
//Maybe jQuery's DOM functions could be helpful 
+0

私が作成した場合:

ウルケースでは、uは入力ボックスでそれを検索したい場合は、行うには少しより多くの仕事があるだろう

var filteredList = list.filter(function(user){ return user.houseName === 'man'; // Or u can use indexOf if u want check if the keyword is contained }); 

のようになります。検索ボックスのフィールドと、それが人を検索する場合、どのように見えるのでしょうか? – gaan10

+0

@ gaan10 - 貢献者はここにフィードをスプーンしていません....提供されたソリューションについてのいくつかの調査を行います..また、提供されたコードにはエラーが含まれています... – Rayon

+0

上記のコードは動作していません.i検索ボックスを作成し、そこからのキーワード。 – gaan10

関連する問題