Implementierung einer automatischen Suchschlüsselwort-Matching-Funktion basierend auf jQuery

Implementierung einer automatischen Suchschlüsselwort-Matching-Funktion basierend auf jQuery_jquery

WBOY

Freigeben： 2016-05-16 15:34:52

Original

1647 Leute haben es durchsucht

Heute schauen wir uns ein einfaches Beispiel für den automatischen Keyword-Abgleich basierend auf JQuery an. Ich hoffe, der Artikel wird Ihnen hilfreich sein.
Beispiel 1
Im Projekt muss der Benutzer manchmal eine Stadt auswählen, aber es gibt zu viele Städte und die Auswahl ist für den Benutzer unpraktisch. Daher wird ein Eingabefeld bereitgestellt, in das der Benutzer die chinesischen Schriftzeichen oder die Pinyin-Abkürzung eingeben kann Stadt. Das Ergebnisdiagramm sieht wie folgt aus:

Das Ergebnis nach der Eingabe von Pinyin ist wie folgt:

Der Implementierungscode lautet wie folgt:

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

Nach dem Login kopieren

Hinweis:

1. Wenn ich den Listenwert im Eingabefeld in Echtzeit abfragen möchte, fällt mir als erstes die Verwendung von Ajax ein, aber nachdem ich darüber nachgedacht habe, habe ich festgestellt, dass der Wert der Liste im Grunde feststeht Warum nicht alles auf einmal laden? Der Hintergrundcode wurde so geändert, dass alle Stadtdetails geladen werden.
2. Wenn sich der Wert im Eingabefeld ändert, muss ein Ereignis ausgelöst werden. Meine erste Idee war, onchange zu verwenden, aber tatsächlich bedeutet onchange, dass sich der Wert des Eingabefelds ändert und das Eingabefeld den Fokus verliert, also habe ich es schließlich verwendet keyup. Beim Testen auf dem Computer gibt es kein Problem mit der Tastenkombination, auf WeChat zeigt sie jedoch keine Wirkung. Also wurde keyup durch das finale bind('input propertychange', function() {} .
ersetzt 3. Bei der Beurteilung, ob die Stadtzeichen die Zeichen im Eingabefeld enthalten, habe ich die Funktion „enthält“ verwendet. Beim Testen unter Firefox gab es keine Probleme, sie zeigte jedoch keine Wirkung auf Chrome- und WeChat-Clients. Abschließend wird „contains“ durch „indexOf“ ersetzt.

Beispiel 2: Verwenden Sie zum Implementieren das Plug-in jquery.autocomplete.
1. Verwenden Sie die Einstellungen
Startseite, Sie müssen den JS-Code des Plugins in Ihr eigenes Projekt einbetten.

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

Nach dem Login kopieren

2. So verwenden Sie
Fügen Sie die AutoComplete-Funktion zum Eingabeformular hinzu, in dem automatische Matching-Eingabeaufforderungen implementiert werden sollen.

<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 });

Nach dem Login kopieren

Führen Sie einen Stichwort-Eingabeaufforderungsabgleich basierend auf den Eingabeinformationen im Textformular durch.

{ 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 });

Nach dem Login kopieren

3. Legen Sie den Leistungsstil fest

Verwenden Sie abschließend Div und CSS, um den Leistungseffekt zu verschönern.

<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

Nach dem Login kopieren

Bei den beiden oben genannten Beispielen geht es um die Funktion zum automatischen Suchschlüsselwortabgleich von jQuery. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird.