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
Post a Comment