텍스트 상자에서 문자 변경시 목록 상자에서 필터 텍스트를 구현하는 방법

Question

wp7에서와 같이 Bing 검색을 구현하는 방법, 목록 상자에서 텍스트 상자에 char을 입력하여 데이터 목록을 가져 왔습니다. 목록에서 데이터를 필터링 할 수 있어야합니다. . 윈도우 폰 (이 코드 플렉스에서의)을위한 실버 라이트 툴킷에서

Answer 1

확인 자동 완성 제어 AutoCompleteBox뿐만 아아 언급 사용에 addtion에서

Answer 2

, 당신은 사용해야 CollectionViewSource http://www.windowsphonegeek.com/news/wp7-Collectionviewsource-filtering

Answer 3

//JQuery: 
 
//mobile - netbanking search 
 
$(document).on('keyup', '#filter', function (e) { 
 
\t // Retrieve the input field text and reset the count to zero 
 
\t var filter = $(this).val(); 
 

 
\t //Regex created to find value in list. 
 
\t var pattern = new RegExp(filter, "i"); 
 

 

 
\t // Loop through the comment list 
 
\t $(".list").each(function() { 
 
\t \t // If the list item does not contain the text phrase fade it out 
 

 
\t \t //Trim space from variable value. 
 
\t \t var str = $(this).text().trim(); 
 

 
\t \t if (str.search(pattern) < 0) { 
 
\t \t \t $(this).fadeOut(); 
 
\t \t \t //Show the list item if the phrase matches and increase the count by 1 
 
\t \t } else { 
 
\t \t \t $(this).show(); 
 
\t \t } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
JQuery Solution: 
 
HTML will be: 
 

 
<div class="yourlist"> 
 

 
\t <input name="" id="filter" type="text" placeholder="Search list" onkeyup="this.setAttribute('value', this.value);" value=""> 
 

 
\t \t <div class="list" style="display: block;"> 
 
\t \t \t Abc 
 
\t \t </div> 
 
\t \t <div class="list" style="display: block;"> 
 
\t \t \t xyz 
 
\t \t </div> 
 
\t \t <div class="list" style="display: block;"> 
 
\t \t \t qwe 
 
\t \t </div> 
 
</div>