在输入字段中输入字符时自动提示
Auto-suggests upon entering character(s) into an input field?
在系统(位置)中有一个巨大的城市和其他东西的数据库,等待被驱动为下拉列表,div(s)或可以压缩大量选择的东西-在想要的位置的每个字符输入输入字段后立即。
这就像我们提交问题时在这里添加标签一样。因此,如果我们输入"L",伦敦和拉齐奥将被列出,在"La"之后-只有拉齐奥将保持可用。
有什么步骤或很酷的例子来完成这个吗?我想自己找点酷的,但运气不好。我用的是jquery
这可能不是最好的解决方案,但它适用于我的网站。该脚本实现了街道名称自动补全,这取决于用户之前输入的州和城市。这段特殊的代码监听事件"keyup"。如果用户输入了多个字母,脚本启动ajax请求,其中.php脚本分析我们发送的参数,进行SQL查询和回复。如果用户足够幸运,并且他得到了一些关于他试图查找的街道名称的建议,我们将显示id=hintsTable的div。我们还为每个自动完成选项创建事件侦听器(单击),其中我们将输入字段的值替换为来自自动完成选项的值,并隐藏下拉列表。我希望这对你有帮助。
$("#street input").keyup(function(){ //street enter
var input = $('#street input').val(); //we get what user has already entered
var code = $('#mregionSelect').val(); //city id
if(input.length > 1)
{
$.ajax({
type : "POST",
url : "components/com_areas/ajaxhelper.php",
data : "input=" + encodeURIComponent(input) + "&code=" + code,
cache : false,
}).done(function(msg){
if(msg.length > 0)
{
$('#hintsTable').html(msg); //fill drop-down list with auto complete options
$('#hints').css('display', 'block'); //show the list
$('#hintsTable tr').click(function(){
var hint = this.cells[0].innerHTML;
$('#street input').val(hint);
$('#hints').css("display", "none");
})
}
else
{
$('#hintsTable').html('');
$('#hints').css('display', 'none');
//$('#findButton').css('display', 'none');
}
})
}
else
{
$('#hintsTable').html('');
$('#hints').css('display', 'none');
//$('#findButton').css('display', 'none');
}
})
你可以在
下面创建一个div文本框<input name="txtSearch" type="text" onkeydown="jscriptfunc();" autocomplete="off"/>
<div class="autoDiv"></div> (could use CSS to format the div accordingly)
现在,用户按下键时的jscriptfunction可以在ajax的帮助下被编码为调用PHP脚本。这个PHP脚本接受用户输入的任何内容,并执行一个简单的模式匹配搜索,例如
Select * from table where field like '$input%' limit 5;
然后我们把结果输入到div
相关文章:
- 如何在 JavaScript 和 HTML 中更改对输入框的提示响应
- JQM simpledialog:如何提示输入数字
- 输入密钥和firefox提示
- 通过提示中的循环触发iFrame中的输入按钮(JavaScript)
- 将“提示”对话框中的输入替换为星号时出现问题
- 如何强制用户在javascript提示中输入值
- 如何在seleniumwebdriver中执行javascript提示并等待接受输入
- 使用html中的jquery输入值窗口提示
- 如何从 Chrome 中的文件输入中删除“未选择文件”工具提示
- Javascript提示和警报输入一个数字,它将循环,您将输入数字以获得它的平均值
- 如何自定义数据::confirm弹出窗口以提示输入,该输入将附加到请求参数中
- 基于给出意外结果的提示输入的逻辑
- 如何创建一个提示用户输入登录id和密码的网站
- JavaScript-输入不是数字时提示
- 强制用户在JavaScript提示框中输入值
- 我可以使用javascript将提示输入的第一个字母大写吗
- 有没有办法仅使用 JavaScript 来操纵控制台.log输出和下一个用户输入提示之间的时间
- 输入提示数的平均值
- 如何在输入提示时提醒用户名
- 表单输入提示与验证插件冲突