Обновление запроса каждый раз при вводе нового символа во вход

Question

У меня есть следующий код для выполнения автозаполнения для ввода при вводе символов.

Проблема, с которой я сталкиваюсь, заключается в том, что с этой функцией, если я набираю «En», она возвращает не только все слова, начинающиеся с «En» (пример: английский, английский, английский и т. Д.), Но любое слово, которое содержит строка символов «En» в любом месте (пример: cENtral, cENtury, calENdar и т. д.)

Что нужно изменить в моем коде, чтобы получить только те слова, которые начинаются с символов, которые я вводил?

Это означает, что запрос не обновляется каждый раз, когда я вводил символ.

Мой код:

<?php 

include("config.php"); 

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

    $termfilter = $GET['term']; 

    $query = "SELECT * FROM cities WHERE city LIKE '$termfilter%'"; 
    $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)) { 
    $city = $myrow[city]; 
    $country = $myrow[country]; 
    if ($i == $get_total_rows){ 
     $list = "'" . $city . " (" . $country . ")'"; 
     $i = $i -1; 
    } 
    else {$list = $list . ", '" . $city . " (" . $country . ")'";} 
    } 

?> 

<center> 
<form name="form1" method="post" action="searchresults.php" > 
    <input id="hero-demo" autofocus type="search" name="search" placeholder="City" > 
    <input type="submit" name="submit" value="Search"> 
</form> 

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="js/jquery.auto-complete.js"></script> 
<script> 
    $(function(){ 
     $('#hero-demo').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> 

Мой вопрос, как я могу получить

$ termfilter = $ GET [ 'термин']; поэтому каждый раз, когда вводится новое письмо, запрос выполняется, а вводимое значение передается в $ termfilter = $ GET ['term'] ;?

Дополнительный код из JS/jquery.auto-complete.js файл в случае нужно это

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

Благодаря

Answer 1

Какие изменения мне нужно сделать в моем коде, чтобы получить только те слова, которые начинаются с символов я печатаю?

Эта строка коды толкает выбор в список предложений, если term матчей в любом месте в choices[i]:

if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]); 

Что вы хотите, чтобы подтолкнуть его к списку только если choices[i] соответствует началу term:

if (choices[i].toLowerCase().indexOf(term) === 0) suggestions.push(choices[i]); 

(Между тем, у вас есть другие вещи, идущие на сервере, что я, честно говоря, не совсем последователен. прежде всего, перечислить полный список данных, а затем выполнить предложения автозаполнения за каждый нажатие клавиши в этом полном списке в javascript, тогда вам все будет хорошо. Но если вы пытаетесь сделать новые запросы сервера на каждое нажатие клавиши и/или пытаетесь выполнить фильтрацию как на стороне сервера, так и на стороне клиента, тогда ... не делайте этого; он будет слабым и невосприимчивым.)

Answer 2

Многие изменения, необходимые в вашем коде, одно изменение здесь, использование цитаты

$city = $myrow["city"]; 
$country = $myrow["country"]; 

вы уверены в запросе или это должно быть

$query = "SELECT * FROM cities WHERE city LIKE '%$termfilter%'"; 

использовать также полный код PHP <?php ?> не <?= ?>