이것은 코드 게시의 단점 중 하나입니다. 검색 창은 네티즌에 의해 거의 깨졌습니다! ! ! 어떤 사람들은 의도적으로 공간에 들어가고, 어떤 사람들은 1 = 1, 어떤 사람들은 경고하고, 어떤 사람들은 HTML에 들어갑니다.
프로젝트에서는 Baidu 및 Taobao와 같은 검색 상자와 마찬가지로 입력 상자의 자동 완료 기능이 종종 사용됩니다. 사용자가 초기 문자 및 키워드를 입력하면 관련 항목을 빠르게 반환하여 사용자가 사용자 경험을 선택하고 향상시킬 수 있도록 프론트 데스크에 표시합니다. 물론이 프로젝트의 완성 기능은 이러한 주요 제조업체의 기술과 비교할 수 없지만 현장 검색에는 충분합니다.
우리가 접촉 한 두 가지 주요 자동 완성 플러그인이 있습니다 : AutoComplete 및 Typeahead . 이 사이트는 typeahead를 사용합니다.
jQueryui-Autocomplete
자동 완성 플러그인-부트 스트랩 -3- 유형
관련 매개 변수 설명 :
출처 : 함수 (쿼리, 프로세스) {}. 쿼리는 현재 텍스트 입력 상자의 문자열을 나타냅니다. 이 방법에서는 Ajax를 통해 배경 (배열 형태의 JSON 객체)에서 데이터를 요청할 수 있으며, 반환 된 객체는 프로세스의 매개 변수로 사용됩니다.
formatitem : function (item) {}. 데이터를 반환하는 특정 JSON 객체는 문자열 형식으로 변환되며, 이는 프롬프트 목록에 표시하는 데 사용되며 리턴 값은 다음과 같습니다.
setValue : function (item) {}. 프롬프트 목록의 항목을 선택하면 텍스트 입력 상자에 표시된 값과 실제로 얻어야하는 값을 설정하십시오. 반환 값 형식 : { 'data-value': 항목 [ "입력 상자에 표시된 값의 항목 속성"], '실제 값': 항목 [ "획득 해야하는 실제 값의 항목 속성"}}이 값은 텍스트 입력 상자의 실제 값 속성을 통해 얻을 수 있습니다.
항목 : 자동 완료 프롬프트를위한 최대 결과 세트 수, 기본값 : 8;
Minlength : 일치 프로세스는 현재 텍스트 입력 상자의 문자열이 속성 값에 도달 할 때만 수행됩니다. 기본값 : 1;
지연 : 밀리 초 지연 수를 지정한 후 배경에서 데이터를 요청하여 배경의 빈번한 요청이 빠른 입력으로 인해 자주 발생하는 것을 방지합니다. 기본값 : 500
특정 코드는 다음과 같습니다.
먼저 JS 파일을 소개합니다
<script src = "~/scripts/jquery-1.9.0.js"> </script> <script src = "~/scripts/bootstrap.js"> </script> <script src = "~/content/js/bootstap3-tyhead.js">
HTML 코드 :
<form id = "searchform"robol = "search"target = "_ blank"method = "get"action = "/search/index"> <div> <입력 유형 = "텍스트"id = "searchwords"name = "searcherwords"data-provide = "typeahead"autocomplete = "끄기"placeholder = "검색을 위해 키워드를 입력하십시오 id = "searchBtn"> 검색 </button> </form>
관련 검색어 처리를위한 JS :
// 자동으로 검색; 자동 연관 완료 이벤트 AutoComplete : function () {jQuery ( '#searchWords')에 검색 상자를 등록합니다. typeahead ({outs : function (Query : function (Query : Query, process)) {// query는 입력 값 jquery.getjson ( '/search/gethotsearchitems', {query ": query}, {data); {return item.replace (/<a (.+?) <// a>/, ""); 여기에 반환하십시오. 그렇지 않으면 replice : afterselect : function (item) {// 항목이 선택된 시간, 항목은 현재 선택한 항목 : 8, 8, 8 지시 : 500 // 지연 시간});배경 처리/검색/gethotsearchitems :
#영역 2.0 jQuery typeahead 플러그인 검색 핫 단어를 비동기로 얻고 검색 상자를 자동으로 완료합니다. ActionResult gethotsearchitems () /// <summary> /// 2.0 jQuery typeahead 플러그인 검색 핫 단어를 비동기로 획득하고 검색 상자를 자동으로 완료하고 검색 할 때마다 사용자 검색의 세부 사항은 라이브러리에 포함됩니다. // 시간마다 검색어가 10 분마다 포함되고 검색 테이블에 대한 통계를 업데이트합니다. <Returns> json </returns> public actionResult gethotsearchItems () {// 2.1 현재 검색어 "쿼리"문자열 쿼리 = 요청 [ "query"]; // 2.2 데이터베이스 IBLL.isearchRankservice = OperateHelper.current.searchsesions.services -services vankservice 에서이 필드의 핫 워드 모음을 쿼리합니다. 데이터베이스 에서이 검색어를 포함하고 검색으로 정렬하고 데이터를 typeahead.jslist <SearchRank> hotlist = hotservice.getDatalistby (s => s.keyword.contains (query), s => s.searchtimes)로 반환합니다. h.searchtimes}). tolist (); arraylist list2 = new arraylist (); int i = 1; foreach (list1의 var item in list1) {list2.add ( "<a class =/"cat/"href =/"#/">"> {0} </a> {1} ", IT2. JSONREQUESTBEHAVIOR.ALKERGET);} else {return JSON ( "", JSONREQUESTBEHAVIOR.ALKERGET);}} #endregion지금은 해보자.