I am trying to have an autoload function from an input so as I type in the possible values come up as options to the user.
我正在尝试从输入中获得自动加载功能,以便输入可能的值作为用户的选项。
For example: If I type in: "Ma" I would get the cities: Manhattan and Madrid.
例如:如果我输入:“Ma”我会得到城市:曼哈顿和马德里。
My code is working if the number of cities stored in my DDBB is small but the problem is when I have a lot of cities stored in the DDBB. I'm reading the DDBB and storing all the values in a variable $list.
如果存储在我的DDBB中的城市数量很少,我的代码正在运行,但问题是当我在DDBB中存储了很多城市时。我正在读取DDBB并将所有值存储在变量$ list中。
Is there a more effective way to do it, so I don't have to store the values in a variable?
有没有更有效的方法,所以我不必将值存储在变量中?
PHP Code:
<?php
include("config.php");
$db = pg_connect("$db_host $db_name $db_username $db_password");
$termfilter = $GET['search'];
$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 . ")'";}
}
?>
HTML Code
<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>
JS Code for AutoComplete Function:
自动完成功能的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));
Any help would be appreciated
任何帮助,将不胜感激
1 个解决方案
#1
0
more effective way to do it like below.
更有效的方式,如下所示。
PHP File AccountIDs.php
PHP文件AccountIDs.php
<?php
include("config.php");
$db = pg_connect("$db_host $db_name $db_username $db_password");
$return_arr = array();
$tget = "%".$_GET['term']."%";
$query = "SELECT * FROM cities where city LIKE '$tget%'";
$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;
$myrow = pg_fetch_assoc($result);
foreach ($myrow as $row){
$row_array['Contry'] = $row[country];
$row_array['value'] = $row[city];
array_push($return_arr,$row_array);
}
/* Toss back results as json encoded array. */
die(json_encode($return_arr));
?>
javascript code
<script type="text/javascript">
$(function () {
$("#city").autocomplete({ // your search textbox id
source: "AutoLists/AccountIDs.php",
minLength: 2, //here defined begin to search with 2 letter
select: function (event, ui) {
$('#Country').val(ui.item.Country); //destination field
}
});
</script>
my form
<form role="form" name="YourFormID" id="YourFormID">
<div class="form-group has-error">
<label for="city" lang="tr">City / Country</label>
<input type="text" class="form-control" id="city" name="city">
<input type="text" name="Country" id="Country">
</div>
</form>
#1
0
more effective way to do it like below.
更有效的方式,如下所示。
PHP File AccountIDs.php
PHP文件AccountIDs.php
<?php
include("config.php");
$db = pg_connect("$db_host $db_name $db_username $db_password");
$return_arr = array();
$tget = "%".$_GET['term']."%";
$query = "SELECT * FROM cities where city LIKE '$tget%'";
$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;
$myrow = pg_fetch_assoc($result);
foreach ($myrow as $row){
$row_array['Contry'] = $row[country];
$row_array['value'] = $row[city];
array_push($return_arr,$row_array);
}
/* Toss back results as json encoded array. */
die(json_encode($return_arr));
?>
javascript code
<script type="text/javascript">
$(function () {
$("#city").autocomplete({ // your search textbox id
source: "AutoLists/AccountIDs.php",
minLength: 2, //here defined begin to search with 2 letter
select: function (event, ui) {
$('#Country').val(ui.item.Country); //destination field
}
});
</script>
my form
<form role="form" name="YourFormID" id="YourFormID">
<div class="form-group has-error">
<label for="city" lang="tr">City / Country</label>
<input type="text" class="form-control" id="city" name="city">
<input type="text" name="Country" id="Country">
</div>
</form>