<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<base href="http://www.ajaxdaddy.com/media/demos/play/1/jquery-autocomplete/autocomplete/" />
<title>j</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
</head>
<body>
<form onsubmit="return false;" action="">
<p>
Ajax City Autocomplete: (try a few examples like: 'Little Grebe', 'Black-crowned Night Heron', 'Kentish Plover')<br />
<input type="text" style="width: 200px;" value="" id="CityAjax" class="ac_input"/>
<input type="button" onclick="lookupAjax();" value="Get Value"/>
</p>
</form>
<script type="text/javascript">
function findValue(li) {
if( li == null ) return alert("No match!");
// if coming from an AJAX call, let's use the CityId as the value
if( !!li.extra ) var sValue = li.extra[0];
// otherwise, let's just display the value in the text box
else var sValue = li.selectValue;
//alert("The value you selected was: " + sValue);
}
function selectItem(li) {
findValue(li);
}
function formatItem(row) {
return row[0] + " (id: " + row[1] + ")";
}
function lookupAjax(){
var oSuggest = $("#CityAjax")[0].autocompleter;
oSuggest.findValue();
return false;
}
function lookupLocal(){
var oSuggest = $("#CityLocal")[0].autocompleter;
oSuggest.findValue();
return false;
}
$("#CityAjax").autocomplete(
"autocomplete.php",
{
delay:10,
minChars:2,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);
</script>
</body>
</html>
分享到:
相关推荐
NULL 博文链接:https://demojava.iteye.com/blog/791962
jquery.autocomplete实例
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
demo,可直接运行查看效果,实现的效果是:在输入框中输入汉字时触发keyup事件,即自动出现多个选项,选中某选项时自动将该选项值和所需属性填充到指定输入框中。
jquery 文本框 自动补全 ajax autocomplete 完整实例
jquery autocomplete demo autocomplete实例
NULL 博文链接:https://appleses.iteye.com/blog/1617170
jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...
PHP实例开发源码—jQuery AutoComplete输入提示的应用实例.zip
jquery文本框自动补全完整实例 ajax autocomplete
jQuery AutoComplete是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入 提示功能,而且示例本身也是...
jquery.autocomplete仿google实例 里面包含js文件及实现方法,非常简单的实现google类似的autocomplete效果 jquery 很强大!!!
本实例用jquery autoComplete结合struts2和mysql数据库整合。 实现自动补全功能,封装方便使用。 包含数据库脚本。
本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法。分享给大家供大家参考,具体如下: 一、一次加载、多次使用: 前端JS代码: /*客户名称自动匹配*/ function customerAutoComplete(){ ...
jquery+json自动完成完整实例(修改版) 兼容各大浏览器,支持中文
jquery-autocomplete配置: [removed][removed] [removed][removed] <link rel=”Stylesheet” href=”/js/jquery.autocomplete.css” /> 首先是一个最简单的Autocomplete(自动完成)代码片段: 代码如下: &...
运用jquery.autocomplete.js 和jquery.autocomplete.css实现文本框自动补全,直接下载可以看到运行效果,带注释
$("#"+txtBelongProvince).autocomplete(data,{ minChars: 0, max:data.length, matchCase:false,//不区分大小写 multiple: true, //允许多选 multipleSeparator:';',//多选分隔符 formatItem: function(row, ...