ASP.NET MVC 3/jQuery를 사용하여 즉석 검색 상자를 어떻게 구현합니까?

Google 검색과 비슷한 즉석 검색 상자를 ASP.NET MVC 3 응용 프로그램에 추가하고 싶습니다. 즉, 검색 창에 입력 할 때 애플리케이션은 자동으로 해당 검색 결과를 표시하고 상자 아래에 제안 사항이있는 드롭 다운 메뉴를 표시해야합니다. 상자 (Google 검색 상자의 오른쪽에있는 X)를 지울 수있는 컨트롤도 있어야합니다.ASP.NET MVC 3/jQuery를 사용하여 즉석 검색 상자를 어떻게 구현합니까?

저는 웹 앱 개발에 새로운 것이지만 Javascript가 필요합니다. 이 프로젝트에서는 jQuery를 사용 하겠지만 아직 자바 스크립트를 추가하지 않았습니다.

위에서 지정한 검색 창 UI는 어떻게 구현할 수 있습니까? 기성품의 jQuery 컴포넌트가 있습니까?

출처

2011-08-25 aknuds1

jQuery UI은 auto complete 구성 요소로 사용하는 것이 좋습니다.

미리 정의 된 로컬 데이터 목록을 보거나 사용자가 입력 할 때 실시간 검색을 수행 할 수 있습니다.

정적 조회를 사용하여 간단한 예를 들어 아래의 코드는 다음과 같습니다

<script> 
    $(function() { 
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
    </script> 



<div class="demo"> 

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"> 
</div> 

</div><!-- End demo --> 



<div class="demo-description" style="display: none; "> 
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> 
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p> 
</div><!-- End demo-description -->

출처

2011-08-25 08:57:14

감사합니다. 자동 완성 기능이 상당히 좋아 보인다. 내가 일할 수 있는지 알게 될거야. – aknuds1

동적 검색을 제공하기위한 제안이 있으십니까? – aknuds1

그건 당신이 코드를 작성하는 데 필요한 것입니다. @ Nicholas-Murray는이 측면을 설명하는 답변에서 링크를 제공합니다. –

어떻게 빠른 검색 작동합니까?

포커스는 텍스트 상자에 설정됩니다. 사용자가 키를 치고 키 업 자바 스크립트 이벤트 (브라우저에 따라 다름)에서 텍스트 상자의 내용을 웹 서버로 보냅니다.

웹 서버는 해당 컨텐츠를 읽고 결과를 생성하며 결과를 나열한 뷰 모델을 잠재적으로 10 가지 결과로 표시하고 결과를 다시 웹 브라우저로 전달합니다.

그런 다음 결과를 가져 와서 div에 붙여 넣으십시오. 내용은 여기에 있습니다

이것은 매우 기본이지만 작동 할 것입니다. 상당히 많은 요청이 서버에 전송되므로 성능을 고려하는 것이 중요합니다.

편집 : 빠른 검색 플러그인에 관해서 - 네 거기에 일부입니다,하지만 당신은 어떻게 작동하는지 알고 있어야하고, 플러그인을 사용하기 때문에 이전에, 무슨 일을 갈 수있는 방법을 보는 것은 매우 기본적인 뭔가를 쓰기 그것은 모두 작동합니다. 행운을 빕니다.

출처

2011-08-25 08:59:17

당신이 Razor Web Page와 SQL CE Database로 jQuery Autocomplete를 시작하게하는 멋진 블로그 post이 있습니다.

출처

2011-08-25 10:28:49

ASP.NET MVC 3/jQuery를 사용하여 즉석 검색 상자를 어떻게 구현합니까?

답변

관련 문제