2016-04-19 5 views
0

入力の自動補完を行う次のコードがあります。特定の文字で始まる単語のみを取得する - jQueryで自動完成

この機能では、 "En"と入力すると "En"で始まるすべての単語(例:英語、イギリス、エンタープライズなど)だけでなく、文字列 "En"どこでも(例:cENtral、cENtury、calENdarなど)

入力した文字で始まる単語だけを取得するには、どのような変更が必要ですか?オートコンプリートjsqueryは、上記に含まと同じファイルに私が持っている呼び出し

<input id="searchword" autofocus type="search" name="search" placeholder="Introduce word" > 

とスクリプト:

おかげ

(function($){ 
$.fn.autoComplete = function(options){ 
    var o = $.extend({}, $.fn.autoComplete.defaults, options); 

    // public methods 
    if (typeof options == 'string') { 
     this.each(function(){ 
      var that = $(this); 
      if (options == 'destroy') { 
       $(window).off('resize.autocomplete', that.updateSC); 
       that.off('blur.autocomplete focus.autocomplete keydown.autocomplete keyup.autocomplete'); 
       if (that.data('autocomplete')) 
        that.attr('autocomplete', that.data('autocomplete')); 
       else 
        that.removeAttr('autocomplete'); 
       $(that.data('sc')).remove(); 
       that.removeData('sc').removeData('autocomplete'); 
      } 
     }); 
     return this; 
    } 

    return this.each(function(){ 
     var that = $(this); 
     // sc = 'suggestions container' 
     that.sc = $('<div class="autocomplete-suggestions '+o.menuClass+'"></div>'); 
     that.data('sc', that.sc).data('autocomplete', that.attr('autocomplete')); 
     that.attr('autocomplete', 'off'); 
     that.cache = {}; 
     that.last_val = ''; 

     that.updateSC = function(resize, next){ 
      that.sc.css({ 
       top: that.offset().top + that.outerHeight(), 
       left: that.offset().left, 
       width: that.outerWidth() 
      }); 
      if (!resize) { 
       that.sc.show(); 
       if (!that.sc.maxHeight) that.sc.maxHeight = parseInt(that.sc.css('max-height')); 
       if (!that.sc.suggestionHeight) that.sc.suggestionHeight = $('.autocomplete-suggestion', that.sc).first().outerHeight(); 
       if (that.sc.suggestionHeight) 
        if (!next) that.sc.scrollTop(0); 
        else { 
         var scrTop = that.sc.scrollTop(), selTop = next.offset().top - that.sc.offset().top; 
         if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0) 
          that.sc.scrollTop(selTop + that.sc.suggestionHeight + scrTop - that.sc.maxHeight); 
         else if (selTop < 0) 
          that.sc.scrollTop(selTop + scrTop); 
        } 
      } 
     } 
     $(window).on('resize.autocomplete', that.updateSC); 

     that.sc.appendTo('body'); 

     that.sc.on('mouseleave', '.autocomplete-suggestion', function(){ 
      $('.autocomplete-suggestion.selected').removeClass('selected'); 
     }); 

     that.sc.on('mouseenter', '.autocomplete-suggestion', function(){ 
      $('.autocomplete-suggestion.selected').removeClass('selected'); 
      $(this).addClass('selected'); 
     }); 

     that.sc.on('mousedown click', '.autocomplete-suggestion', function (e){ 
      var item = $(this), v = item.data('val'); 
      if (v || item.hasClass('autocomplete-suggestion')) { // else outside click 
       that.val(v); 
       o.onSelect(e, v, item); 
       that.sc.hide(); 
      } 
      return false; 
     }); 

     that.on('blur.autocomplete', function(){ 
      try { over_sb = $('.autocomplete-suggestions:hover').length; } catch(e){ over_sb = 0; } // IE7 fix :hover 
      if (!over_sb) { 
       that.last_val = that.val(); 
       that.sc.hide(); 
       setTimeout(function(){ that.sc.hide(); }, 350); // hide suggestions on fast input 
      } else if (!that.is(':focus')) setTimeout(function(){ that.focus(); }, 20); 
     }); 

     if (!o.minChars) that.on('focus.autocomplete', function(){ that.last_val = '\n'; that.trigger('keyup.autocomplete'); }); 

     function suggest(data){ 
      var val = that.val(); 
      that.cache[val] = data; 
      if (data.length && val.length >= o.minChars) { 
       var s = ''; 
       for (var i=0;i<data.length;i++) s += o.renderItem(data[i], val); 
       that.sc.html(s); 
       that.updateSC(0); 
      } 
      else 
       that.sc.hide(); 
     } 

     that.on('keydown.autocomplete', function(e){ 
      // down (40), up (38) 
      if ((e.which == 40 || e.which == 38) && that.sc.html()) { 
       var next, sel = $('.autocomplete-suggestion.selected', that.sc); 
       if (!sel.length) { 
        next = (e.which == 40) ? $('.autocomplete-suggestion', that.sc).first() : $('.autocomplete-suggestion', that.sc).last(); 
        that.val(next.addClass('selected').data('val')); 
       } else { 
        next = (e.which == 40) ? sel.next('.autocomplete-suggestion') : sel.prev('.autocomplete-suggestion'); 
        if (next.length) { sel.removeClass('selected'); that.val(next.addClass('selected').data('val')); } 
        else { sel.removeClass('selected'); that.val(that.last_val); next = 0; } 
       } 
       that.updateSC(0, next); 
       return false; 
      } 
      // esc 
      else if (e.which == 27) that.val(that.last_val).sc.hide(); 
      // enter or tab 
      else if (e.which == 13 || e.which == 9) { 
       var sel = $('.autocomplete-suggestion.selected', that.sc); 
       if (sel.length && that.sc.is(':visible')) { o.onSelect(e, sel.data('val'), sel); setTimeout(function(){ that.sc.hide(); }, 20); } 
      } 
     }); 

     that.on('keyup.autocomplete', function(e){ 
      if (!~$.inArray(e.which, [13, 27, 35, 36, 37, 38, 39, 40])) { 
       var val = that.val(); 
       if (val.length >= o.minChars) { 
        if (val != that.last_val) { 
         that.last_val = val; 
         clearTimeout(that.timer); 
         if (o.cache) { 
          if (val in that.cache) { suggest(that.cache[val]); return; } 
          // no requests if previous suggestions were empty 
          for (var i=1; i<val.length-o.minChars; i++) { 
           var part = val.slice(0, val.length-i); 
           if (part in that.cache && !that.cache[part].length) { suggest([]); return; } 
          } 
         } 
         that.timer = setTimeout(function(){ o.source(val, suggest) }, o.delay); 
        } 
       } else { 
        that.last_val = val; 
        that.sc.hide(); 
       } 
      } 
     }); 
    }); 
} 

$.fn.autoComplete.defaults = { 
    source: 0, 
    minChars: 3, 
    delay: 150, 
    cache: 1, 
    menuClass: '', 
    renderItem: function (item, search){ 
     // escape special characters 
     search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); 
     var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi"); 
     return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>'; 
    }, 
    onSelect: function(e, term, item){} 
}; 
}(jQuery)); 

UPDATE

だから私のような入力を持っています言葉のリストを取得するPHP:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="js/jquery.auto-complete.js"></script> 
<script> 
    $(function(){ 
     $('#searchword').autoComplete({ 
      minChars: 2, 
      source: function(term, suggest){ 
       term = term.toLowerCase(); 
       var choices = [<?= $list ?>]; 
       var suggestions = []; 
       for (i=0;i<choices.length;i++) 
        if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]); 
       suggest(suggestions); 
      } 
     }); 

    }); 

</script> 

私のデータベースから単語のリストを取得するPHPコード:

<?php 

include("config.php"); 

    $db = pg_connect("$db_host $db_name $db_username $db_password"); 

    $query = "SELECT * FROM words"; 
    $result = pg_query($query); 
    if (!$result) { 
     echo "Problem with query " . $query . "<br/>"; 
     echo pg_last_error(); 
     exit(); 
    } 

    $get_total_rows = pg_numrows($result); 
    $i = $get_total_rows; 

while($myrow = pg_fetch_assoc($result)) { 
    $word = $myrow[word]; 
    if ($i == $get_total_rows){ 
     $list = "'" . $word . "'"; 
     $i = $i -1; 
    } 
    else {$list = $list . ", '" . $word . "'";} 
    } 

?> 
+0

あなたの結果はdbから取得していますか? – LearningPhase

+0

クエリがあれば、テーブル名からlikeを選択することができます。名前は 'En%'のようになります – LearningPhase

+0

@LearningPhaseはい、私はそれを渡す方法はわかりません。元の投稿の更新をご覧ください。 – Sam

答えて

0
$termfilter = $_GET['term']; you pass this in from your page 

言葉 自分のフィールド名LIKE 'FROM

SELECT *などのキーワードで検索するには、以下のクエリを使用します$ termfilter% ';

+0

上記の提案は役に立ちましたか? – LearningPhase

+0

あなたの返事をありがとう、私は私が持っている唯一のクエリは、データベースから単語を取得することであり、再帰的ではない(それは入力に応じて変更されないことを意味するので)私は正確にそれを使用する場所を把握しようとしている'$ termfilter = $ _GET ['term'];'ありがとうございました。 – Sam

関連する問題