Getting only the words starting with certain characters - autocomplete in jQuery -


i have following code perform auto-completion input.

the problem i'm having function if type in "en" returns not words starting "en" (example: english, england, enterprise, etc) word contains string of characters "en" anywhere (example: central, century, calendar, etc)

what change need make in code words start characters type in?

thanks

(function($){ $.fn.autocomplete = function(options){     var o = $.extend({}, $.fn.autocomplete.defaults, options);      // public methods     if (typeof options == 'string') {         this.each(function(){             var = $(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 = $(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 = '';                 (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), (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 empty                             (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

so have input like:

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

and script call autocomplete jsquery included above , in same file have php gets list of words:

<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 = [];                 (i=0;i<choices.length;i++)                     if (~choices[i].tolowercase().indexof(term)) suggestions.push(choices[i]);                 suggest(suggestions);             }         });      });  </script> 

php code gets list of words database:

<?php  include("config.php");     $db = pg_connect("$db_host $db_name $db_username $db_password");      $query = "select * words";     $result = pg_query($query);     if (!$result) {         echo "problem 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 . "'";}       }  ?> 

$termfilter = $_get['term']; pass in page 

use below query search keyword

select * words field name '$termfilter%';


Comments

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -