2016-07-09 7 views
0

사용자가 입력 한 모든 입력에서 집 이름을 검색하고 싶습니다. 사용자 세부 정보가 다음과 같으면자바 스크립트에서 json 객체의 문자열을 검색하고 싶습니다.

[{ "houseName": "man", "houseType": "별장", "houseFloors": "7", "houselocation": "Seattle"}, "houseLocation": "houselocation": "워싱턴 DC"}]

나는 사람으로 검색을 제공하면 다음과 같이 표시해야합니다.

은 [{ "houseName": "사람", "houseType": "빌라", "houseFloors": "일곱", "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을 사용할 수 있습니다. u는 입력 상자를 검색하려는 경우 UR의 경우

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

모양을, 조금 더 작업 할있을 것입니다 : 내가 만드는 경우

//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

검색 창 필드와 사람을 검색하는 경우 어떻게 보이게해야합니다. – gaan10

+0

@ gaan10 - 기여자는 피드를 스푼하지 않습니다. 제공된 솔루션에 대한 조사를 수행하십시오. 제공된 코드에 오류가 있습니다 ... – Rayon

+0

위의 코드가 작동하지 않습니다 .i 검색 상자를 만들고 가져 오려고했습니다. 거기에서 키워드. – gaan10

관련 문제