jQuery_jquery 기반 자동 검색 키워드 매칭 기능 구현-JS 튜토리얼-php.cn

jQuery_jquery 기반 자동 검색 키워드 매칭 기능 구현

WBOY

풀어 주다： 2016-05-16 15:34:52

원래의

1606명이 탐색했습니다.

오늘은 jquery를 기반으로 한 자동 키워드 매칭의 간단한 예를 살펴보겠습니다. 이 글이 여러분에게 도움이 되기를 바랍니다.
예시 1
프로젝트에서 도시를 선택해야 하는 경우가 있는데, 도시가 너무 많아 선택하기 불편하기 때문에 한자나 병음을 입력할 수 있는 입력창을 제공한다. 도시. 결과 도표는 다음과 같습니다.

병음을 입력한 결과는 다음과 같습니다.

구현 코드는 다음과 같습니다.

<html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "utf-8" ><script type="text/javascript" src="jquery.min.js"></script><body><input id="searchCityName" style="width: 100%;" type="text" placeholder="中文 / 拼音首字母" /> 
 <ul> 
  <li pinyin="bj" cityname="北京"><a href="/cityBranch/12.html">北京 </a></li> 
  <li pinyin="dl" cityname="大连"><a href="/cityBranch/14.html">大连 </a></li> 
  <li pinyin="sh" cityname="上海"><a href="/cityBranch/13.html">上海 </a></li> 
  <li pinyin="jn" cityname="济南"><a href="/cityBranch/15.html">济南 </a></li> 
  <li pinyin="gz" cityname="广州"><a href="/cityBranch/17.html">广州 </a></li> 
  <li pinyin="jh" cityname="金华"><a href="/cityBranch/18.html">金华 </a></li> 
  <li pinyin="wh" cityname="武汉"><a href="/cityBranch/19.html">武汉 </a></li> 
  <li pinyin="nj" cityname="南京"><a href="/cityBranch/20.html">南京 </a></li> 
  <li pinyin="sz" cityname="深圳"><a href="/cityBranch/22.html">深圳 </a></li> 
  <li pinyin="tj" cityname="天津"><a href="/cityBranch/21.html">天津 </a></li> 
  <li pinyin="cd" cityname="成都"><a href="/cityBranch/24.html">成都 </a></li> 
  <li pinyin="ly" cityname="临沂"><a href="/cityBranch/25.html">临沂 </a></li> 
  <li pinyin="cc" cityname="长春"><a href="/cityBranch/26.html">长春 </a></li> 
  <li pinyin="hz" cityname="杭州"><a href="/cityBranch/27.html">杭州 </a></li> 
  <li pinyin="nb" cityname="宁波"><a href="/cityBranch/28.html">宁波 </a></li> 
  <li pinyin="qd" cityname="青岛"><a href="/cityBranch/29.html">青岛 </a></li> 
  <li pinyin="sy" cityname="沈阳"><a href="/cityBranch/33.html">沈阳 </a></li> 
 </ul>
 <script>
  function searchCity() {
    var searchCityName = $("#searchCityName").val();    if (searchCityName == "") {
      $("ul li").show();
    } else {
      $("ul li").each(          function() {
            var pinyin = $(this).attr("pinyin");            var cityName = $(this).attr("cityName");            if (pinyin.indexOf(searchCityName) != -1
                || cityName.indexOf(searchCityName) != -1) {
              $(this).show();
            } else {
              $(this).hide();
            }
          });
    }
  }
  $('#searchCityName').bind('input propertychange', function() {
    searchCity();
  }); </script></body></html>

로그인 후 복사

참고:

1. 입력창에 있는 목록 값을 실시간으로 조회하고 싶을 때 가장 먼저 떠오르는 해결 방법은 ajax를 사용하는 것인데, 생각해 보니 목록의 값은 기본적으로 고정되어 있다는 것을 알게 되었습니다. . 한꺼번에 로드하면 어떨까요? 도시 세부정보를 모두 로드하도록 배경 코드가 변경되었습니다.
2. 입력 상자의 값이 변경되면 이벤트가 발생해야 합니다. 처음에는 onchange를 사용하는 것이었는데 실제로 onchange는 입력 상자의 값이 변경되어 입력 상자가 포커스를 잃는다는 의미이므로 결국 사용했습니다. 키업. 컴퓨터에서 테스트했을 때 키업에는 문제가 없으나, 위챗에서는 적용되지 않습니다. 따라서 키업은 최종 바인딩('input propertychange', function() {} .
으로 대체되었습니다. 3. 도시 문자에 입력란의 문자가 포함되어 있는지 판단할 때 포함 기능을 사용했습니다. Firefox에서는 테스트할 때 문제가 없었으나 Chrome 및 WeChat 클라이언트에서는 적용되지 않았습니다. 마지막으로 포함은 indexOf로 대체됩니다.

예제 2, jquery.autocomplete 플러그인을 사용하여 구현합니다.
1. 설정 사용
홈페이지에서는 플러그인의 js 코드를 자신의 프로젝트에 삽입해야 합니다.

<script src="jquery.js" type="text/javascript"><!--mce:0--></script><script src="jquery.autocomplete.js" type="text/javascript"><!--mce:1--></script>

로그인 후 복사

2. 이용방법
자동 일치 프롬프트를 구현할 입력 양식에 AutoComplete 기능을 추가합니다.

<input id="query" name="q" />
初始化 AutoComplete 对象，确保正确加载 DOM 对象，否则IE下的用户可能会出现错误。
$('#query').autocomplete({ serviceUrl: 'service/autocomplete.ashx', // Page for processing autocomplete requests minChars: 2, // Minimum request length for triggering autocomplete delimiter: /(,|;)\s*/, // Delimiter for separating requests (a character or regex) maxHeight: 400, // Maximum height of the suggestion list, in pixels width: 300, // List width zIndex: 9999, // List's z-index deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 ms. params: { country: 'Yes'}, // Additional parameters onSelect: function(data, value){ }, // Callback function, triggered if one of the suggested options is selected, lookup: ['January', 'February', 'March'] // List of suggestions for local autocomplete });

로그인 후 복사

텍스트 형식에 입력된 정보를 기반으로 키워드 프롬프트 매칭을 수행합니다.

{ query:'Li', // Original request suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // List of suggestions data:['LR','LY','LI','LT'] // Optional parameter: list of keys for suggestion options; used in callback functions. } 
jQuery AutoComplete 插件支持 on/off功能，从而控制效果的开关。
var ac = $('#query').autocomplete({ /*parameters*/ }); ac.disable(); ac.enable(); ac.setOptons({ zIndex: 1001 });

로그인 후 복사

3. 공연 스타일을 설정하세요

마지막으로 div와 css를 사용하여 성능 효과를 미화합니다.

<div class="autocomplete-w1"><div id="Autocomplete_1240430421731" class="autocomplete" style="width: 299px;"><div><strong>Li</strong>beria</div><div><strong>Li</strong>byan Arab Jamahiriya</div><div><strong>Li</strong>echtenstein</div><div class="selected"><strong>Li</strong>thuania</div></div></div> .autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }.autocomplete .selected { background:#F0F0F0; }.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }.autocomplete strong { font-weight:normal; color:#3399FF; } jQuery AutoComplete

로그인 후 복사

위에서 공유한 두 가지 예는 모두 jQuery의 자동 검색 키워드 매칭 기능에 대한 것입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.