这几天一直搞开发,
动态提示:确定肯定是Ajax,想用存Ajax感觉工程浩大。于是想到了jQuery。想到了jQuery插件。废话少说。详细介绍autocomplete.
下载:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
地址有可能改变。大家baidu
搜索 jquery autocomplete 下载。
配置:解压缩后吧整个文件夹放入eclipse的项目中。
导入样式根据自己的实际情况 <link
rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css
"
/>
导入库文件,这里也是根据自己的实际情况,注意(在导入库文件之前应该导入jQuery库文件,注意顺序)<script
type="text/javascript" src="jquery-autocomplete/jquery-ui-all-min-lastest.js"></script
>
<script type="text/javascript" srcjquery-autocomplete/jquery.autocomplete.min.js"></script
>
使用:既然是动态提示! 就是输入内容以后触发Ajax到前台匹配。
jsp页面:
<input type="text" id="searchName" name="searchName" />
js: var
cityList;
var options =
{
minChars:
1,//从第几个开始匹配
max:
10,//显示匹配的个数
width:
448,//宽度
matchContains:
true,//支持中文匹配
formatItem: function(row, rowNum, rowCount,
searchItem)//匹配条显示的格式化
{
if(row.hospitalname==undefined)
{
return row.text
;
}
else
return row.text+"-"+row.hospitalname+"-"+row.officename
;
},
formatMatch: function(row, rowNum,
rowCount)//按照什么匹配
{
return row.userid + " " +
row.text;
},
formatResult: function(row, rowNum,
rowCount)//格式化结果
{
return
row.text;
}
};
$(function()
{
$("#searchname").bind("click",getSearch);
});
function
getSearch(event)//当点击时候执行函数
{
$.getJSON("/YHTWeb/userSearch.do?method=getUserSearchTitleListAjax",
{
searchName:$("#searchname").val(),//配置参数
d:new
Date()//防止缓存
},
function(data){//回调函数
var
cityList =
data.beans;//我在后台自己组织的json数据data.beans返回的是一个jsonArray。
$('div[class="ac_results"]').remove();//防止多次添加!每次先清空div。通过firefox
可能看到
$("#searchname").autocomplete(cityList,
options);//自动匹配
$("#searchname").result(function(event, row,
formatted)//选择匹配项执行函数
{
$("#textuserid").val(row.userid);//这里说明吧id保存一个hidden中。
});
}
)
}
通过这几步就可能实现了! 大家可以看看效果。注意后台组织数据! json。相信大家肯定成功。
相信大家实现了以后肯定有这样的疑问,匹配一个文本框就要写一个!这样通用性不强!下面写一下可以匹配多个的!做到jQuery 的宗旨,write less
do more。
js:
function
getSearch1(docName,searchAsName)
{
$(function(){
var
searchname="#"+docName.id;
var
searchas=searchAsName;
var
cityList;
var options =
{
minChars:
1,
max:
10,
width:
448,
matchContains:
true,
formatItem: function(row, rowNum, rowCount,
searchItem)
{
if(row.hospitalname==undefined)
{
return row.text
;
}
else
return row.text+"-"+row.hospitalname+"-"+row.officename
;
},
formatMatch: function(row, rowNum,
rowCount)
{
return row.userid + " " +
row.text;
},
formatResult: function(row, rowNum,
rowCount)
{
return
row.text;
}
};
$(function()
{
$(searchname).bind("click",getSearch);
});
function
getSearch(event)
{
$.getJSON("/YHTWeb/userSearch.do?method=getUserSearchTitleListAjax",
{
searchAs:searchas,
searchName:$(searchname).val(),
d:new
Date()
},
function(data){
var
cityList =
data.beans;
$('div[class="ac_results"]').remove();
$(searchname).autocomplete(cityList,
options);
$(searchname).result(function(event, row,
formatted)
{
$("#textuserid").val(row.userid);
});
}
)
}
})
}
jsp:<input type="text" id="searchName" name="searchName" size="60"
style="border:0;" onclick="getSearch1(this,$('#searchAs').val()
)"/>//第一个参数是哪个控件实现,第二个是相当于event后台处理。
今天好累! 格式排版写的不好! 大家将就的看吧!
QQ:214644119
分享到:
相关推荐
3. **监听输入变化**:`AutoCompleteTextView`会自动监听用户的输入,当输入达到一定长度(可通过`setThreshold(int)`设置)时,它会触发过滤器进行匹配操作。 4. **自定义过滤器**:如果你需要更复杂的匹配逻辑,...
在IT行业中,自动匹配检索(Autocomplete)是一项广泛应用于各种搜索框和输入字段的功能,它极大地提升了用户体验,尤其是在处理大量数据时。"autocomplete高效自动匹配检索功能"的标题揭示了我们要探讨的核心技术,...
在Bootstrap Autocomplete中,通常使用简单的字符串包含或正则表达式来实现,当用户输入一部分文本时,插件会自动过滤出匹配的选项。 5. **事件监听**:为了响应用户的输入,我们需要监听`keyup`或`keydown`等键盘...
在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI Autocomplete,它可以帮助开发者轻松实现这种功能。...
在本文中,我们将深入探讨jQuery库中的`autocomplete`功能,这是一种强大的工具,可为用户提供智能搜索和自动填充建议。jQuery UI库提供了`autocomplete`插件,使得开发人员能够轻松地在网页表单输入框中实现自动...
jQuery Autocomplete是一款非常实用的插件,用于在输入框中实现自动补全功能。这个功能在许多网站上广泛使用,例如搜索引擎、电子商务网站的商品搜索、社交媒体的用户名提示等。jQuery库的强大结合Autocomplete插件...
导入myeclips就可用,智能搜索功能:让用户体验感觉良好点,在输入相关的关键搜索字时就可以得知相应的记录数 Dwr+AutoComplete+pinyin4j 自动匹配(中文,拼音)
在IT领域,自动完成下拉框(通常称为AutoComplete或Autosuggest)是一种常见的用户界面功能,用于提高输入效率和用户体验。它会在用户输入文本时提供可能的匹配项,通常是基于之前输入的历史记录、数据库查询结果或...
综上所述,本示例中的"autocomplete自动补全的例子jsp"展示了如何在JSP项目中结合jQuery UI的Autocomplete插件,实现实时的搜索建议功能。通过前后端的协同工作,我们可以为用户提供便捷的输入体验,提升项目的整体...
标题 "Dwr+AutoComplete+pinyin4j 自动匹配(中文,拼音)" 提到的技术栈涉及了三个关键部分:DWR(Direct Web Remoting)、AutoComplete(自动完成)和pinyin4j。这些技术在Web开发中都有特定的应用场景。 DWR是一...
然而,有时我们希望它能具备更智能的功能,如自动完成(Autocomplete)或智能输入(IntelliSense),这在编写代码编辑器、搜索框或数据输入界面时非常有用。本文将深入探讨如何在C# WinForm应用中实现`RichTextBox`...
`jQuery Autocomplete` 是一个非常实用的功能,它能够为用户在输入框中提供动态的建议或自动补全,极大地提升了用户体验。这个功能是基于 jQuery UI 库中的 `Autocomplete` 组件实现的,它能够与多种数据源(如数组...
jQuery Autocomplete 是一个非常流行的前端开发插件,它为输入框提供了自动完成的功能,极大地提升了用户在网页上的交互体验。这个插件基于JavaScript库jQuery构建,允许开发者轻松地创建搜索建议、动态填充表单等...
在IT行业中,自动检索提示(Autocomplete)是一种常见的用户体验优化技术,它允许用户在输入时获得与输入内容匹配的建议选项。在这个特定的项目中,我们关注的是使用JSON格式进行数据传输和缓存策略来实现自动检索...
在IT行业中,创建一个“可以输入带自动匹配的下拉框”是常见的需求,尤其在网页交互设计中。这样的功能通常被称作自动补全(AutoComplete)或智能搜索框,它极大地提升了用户输入数据的效率和用户体验。下面将详细...
在本项目中,我们关注的是如何使用SWT来实现一个具有自动匹配功能的文本框。这个功能常见于许多应用程序中,如搜索引擎、下拉菜单等,它允许用户在输入时自动显示与输入内容相匹配的建议。 在Java SWT中,我们可以...
1,本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现,解决了多音字匹配问题。 2,由于用了Linq查询,所以至少需要.NET Framework 3.5。 4,由于jquery匹配时的match项和result项来自不同...
在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...
在IT行业中,自动补全(Autocomplete)是一种常见的功能,广泛应用于搜索引擎、代码编辑器、表单输入等场景,能够极大地提升用户输入效率。本文将深入探讨如何利用`autocomplete`功能,结合`_renderItem`定制结果...