参考这个页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML> <HEAD>
<META http-equiv=Content-Type content= "text/html; charset=gb2312 ">
<META content= "MSHTML 6.00.6000.16441 " name=GENERATOR> </HEAD>
<BODY> <XMP> 我想做一个这样的输入框：它有一个下拉的可选列表，列表内容是已知的可能会输入文字；
在输入一个字或词后它会自动调整顺序，把前面几个字符匹配的选项移到上面来，如果没有匹配
的就不管你，让你自个儿输入。（当然，列表里已有的也可以用鼠标点击输入可用键盘选中输入）
其实说半天也就是象 IE 的地址输入框啦！
</XMP> <BR>
<INPUT id='txt' onkeydown='enterTips()' onkeyup='showtips();if(event.keyCode==27)c();'> (eg. ShanDong) <BR>
<SELECT id='sel' onkeydown='if(event.keyCode==13)rv()' style='DISPLAY:none;' onclick='rv()'> </SELECT>
<SCRIPT>
var msg = new Array( "Beijing ", "Tianjing ", "Shanghai ", "Guangdong ", "ShanDong ", "Shanxi ", "Hunan ", "Hubei ");
var msg2=new Array( "北京 ", "天津 ", "上海 ", "广东 ", "山东 ", "陕西 ", "湖南 ", "湖北 ");
function showtips()
{
eo=event.srcElement;
sel.length=0;
var len=msg.length;
var re=new RegExp( "^"+eo.value, "i")
var j=0
for(i=0;i <len;i++)
if(re.test(msg[i])==true)
{ sel.style.display= '';
sel.add(new Option(msg[i],msg2[i]));
j++
}
sel.size = (j> 1)?j:2;
}
function enterTips()
{
e=event.keyCode;
if(sel.style.display!= 'none')
{
if(e==13)
{
event.srcElement.value=sel.value;
sel.style.display= 'none';
}
if(e==40)
sel.focus();
}
}
function rv()
{
txt.value=sel.value;
c();
}
function c()
{
sel.style.display= 'none';
txt.focus();
}
document.onclick=function()
{
c();
}
</SCRIPT>
</BODY> </HTML>
分享到：
相关推荐
《jQuery Autocomplete 全面解析》 jQuery Autocomplete 是一个非常实用的插件，它为网页表单输入框提供了自动补全功能，极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需...
**jQuery Autocomplete 实现输入框智能提示** jQuery Autocomplete 是一个强大的组件，广泛应用于网页上的输入框，可以为用户提供实时的搜索建议或自动补全功能。这个组件通过与后端服务器进行异步通信（通常使用 ...
Autocomplete
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件，它为HTML输入框提供了自动补全功能，极大地提升了用户体验。这个插件基于jQuery库，结合Ajax技术，能够实时从服务器获取...
在layui中，"autocomplete"是一款自动填充插件，常用于输入框，提供智能提示功能，提高用户输入效率。这款插件适用于各种需要自动补全场景，如搜索框、表单填写等。 在layui的autocomplete插件中，主要涉及以下知识...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案，它极大地提升了用户体验，尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的，因此，首先需要确保在项目中引入了...
jQuery Autocomplete是一款非常实用的JavaScript插件，它允许用户在输入框中输入文字时，根据已有的数据集动态提供补全建议。这个功能在许多Web应用中被广泛使用，如搜索框、表单输入等。在给定的“jquery ...
Bootstrap Autocomplete是一款基于Bootstrap框架的插件，专为提高用户输入体验而设计。它提供了模糊匹配功能，使得用户在输入时能够快速找到并选择预先设定的值列表中的选项，极大地提升了交互性和效率。这个插件...
在IT行业中，自动补全（Autocomplete）是一种常见的功能，广泛应用于搜索引擎、代码编辑器、表单输入等场景，能够极大地提升用户输入效率。本文将深入探讨如何利用`autocomplete`功能，结合`_renderItem`定制结果...
用java实现autocomplete搜索功能，可以获取除输入框的其它动态参数，后台字符串拼接，返回json数据，格式如下： { query:'Li', suggestions:['Liberia', 'Libyan Arab Jamahiriya', 'Liechtenstein', 'Lithuania'...
在Vant的组件体系中，`Field`组件主要用于表单输入，而`Autocomplete`则是用于实现自动完成功能的组件。在本案例中，我们将探讨如何将`Field`组件与自动完成功能相结合。 1. **Vant Field组件** Vant的`Field`组件...
《jQuery Autocomplete 插件参数使用详解》 在Web开发中，为了提升用户体验，自动填充（Autocomplete）功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件，名为jQuery UI ...
《jQuery Autocomplete 智能联想框JS实现详解》 在网页开发中，为了提高用户体验，经常需要使用到一种功能——智能联想框。这个功能可以让用户在输入框中输入文字时，自动显示与输入内容相关的建议，就像百度搜索...
《jQuery Autocomplete自动完成功能详解及实战演示》 在网页开发中，为了提高用户体验，我们经常需要实现一种叫做“自动完成”（Autocomplete）的功能，它可以在用户输入时提供匹配的建议，帮助用户快速找到他们想...
在给定的标题“jquery easyui TagBox with Autocomplete ajax请求方式自动填充”中，主要涉及了jQuery EasyUI的TagBox组件，以及其Autocomplete功能与ajax请求方式的结合应用。 TagBox是jQuery EasyUI的一个组件，...
**jQuery Autocomplete 插件详解** 在Web开发中，自动完成（Autocomplete）功能是一种常见的用户体验优化技术，它能够帮助用户快速找到并选择输入框中可能的匹配项。jQuery库提供了一个强大的插件——jQuery UI ...
Vue2Autocomplete是针对Vue 2框架设计的一个高效、可定制化的文本输入自动完成组件。这个组件主要用于提高用户在输入时的效率，通过提供实时的建议列表，帮助用户快速找到并选择所需的内容。Vue.js是一个轻量级但...
### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中，提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...
**jQuery UI Autocomplete** jQuery UI Autocomplete 是一个强大的前端组件，它基于 jQuery 库，用于实现自动补全功能。这个组件允许用户在输入框中键入文字时，系统会根据预设的数据源实时显示匹配的建议列表，极...
《jQuery Autocomplete 实现文本自动填充详解》 在网页开发中，为了提高用户体验，经常会用到文本自动填充功能，这可以极大地简化用户输入，减少错误。jQuery Autocomplete 是一款非常实用的插件，用于实现这一功能...