每次在输入中键入新字符时更新查询


Updating a query each time that a new character is typed in into an input

在引入字符时,我有以下代码来执行输入的自动完成。

我遇到的问题是,使用这个函数,如果我键入"En",它不仅会返回所有以"En"开头的单词(例如:English、England、Enterprise等),还会返回任何位置包含字符串"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['term'];因此,每次键入新的字母时,都会执行查询,并将键入的值传递给$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));

感谢

我需要在代码中做什么更改才能只得到那些以我键入的字符开头的单词?

如果termchoices[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对该完整列表进行每次击键自动完成建议,那么你应该都很好。但如果你试图在每次击键时发出新的服务器请求,和/或试图同时过滤服务器和cli然后。。。不要那样做;它将变得迟缓且毫无反应。)

代码中需要进行许多更改,其中一个更改是使用引号

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

你确定查询还是应该是

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

也使用完整的php代码<?php ?>而不是<?= ?>