我有以下代码在引入字符时为输入执行自动完成。
我遇到的问题是,如果我输入" 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 [&#39; term&#39;];因此,每次输入新的字母时,查询都会执行,输入的值将传递给$ termfilter = $ GET [&#39; term&#39;];?
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));
由于
答案 0 :(得分: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中列出,那么你应该都很好。但如果你在每次击键时尝试发出新的服务器请求,和/或试图在服务器端和客户端都进行过滤,那么......不要#39; t那样做;它会变得迟钝而且反应迟钝。)
答案 1 :(得分:0)
您的代码需要进行许多更改,此处更改一次,使用引号
$city = $myrow["city"];
$country = $myrow["country"];
您确定查询还是
$query = "SELECT * FROM cities WHERE city LIKE '%$termfilter%'";
还使用完整的PHP代码<?php ?>
而不是<?= ?>