js文本框输入内容智能提示效果

本文实例讲述了射流研究…文本框输入内容智能提示效果代码。分享给大家供大家参考。具体如下：运行效果截图如下：

大体思路：

1.监听文本框事件。这里是用的按键事件。大家可以尝试用onchange事件。不过感觉按键事件的效果要好一点。

2.根据输入内容通过创建交互式、快速动态网页应用的网页开发技术异步的方式去访问后台数据。

3.遍历返回数据将数据添加到显示区域。

4.在添加数据的同时给每一条数据加上一些效果，点击其中一条将数据填到文本框，并且提示内容消失。

5.后台数据应该拼接成json格式。

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title自动提示/title script src=' http : script/jquery-1。4 .1 .js ' type=' text/JavaScript '/script script type=' text/ecmascript ' function txt change(){ var nnmae=$(' # int XT ').val()；$.ajax({ type: 'post '，url: 'ashx/AutoNote.ashx '，data: { name: nnmae }，dataType: 'json '，success:函数(数据){ $('#tbcontent ').html(" ")；//删除原有数据如果(数据！=' null '){ for(var I=0；i $(数据)。长度；i ) { $('#tbcontent ').追加(' div class=' item ' onclick='鼠标按下(this)')数据[i].名称/div ')；} $('#tbcontent ').向下滑动()；} } });} //选择其中的提示内容函数鼠标向下(对象){ $(' # intxt ')).val($(对象)。text())；$('#tbcontent ').淡出()；} //文档框失去焦点，隐藏提示内容函数lost() { $('#tbcontent ').淡出()；}/脚本样式类型=' text/CSS '。项目：悬停{背景色：灰色；光标：指针指针；} .显示{ width : 200 pxz-index : 10；显示器：块；} .隐藏{ width : 200 pxz-index : 10；显示器：无；border:1px实心rgb(80，160，91)；边框-top :无；}表tr TD { margin : none padd : none border : none }/style/head body form id=' form 1 ' runat=' server ' div style=' width : 210 px；左边距左： auto regin-右： auto ' table tr TD输入类型=' text ' style=' width : 200px ' id=' int XT ' on key up=' txt change()' on bulr=' lost()'//TD/tr TD div id=' tbcontent ' class=' hidden '/div/TD/tr/table/div/form/body/html js文本框输入内容智能提示效果，对于我们输入信息进行搜索很有实用价值，希望这篇文章对大家学习爪哇岛描述语言程序设计有所帮助。