注意需要jquery.autocomplete.js和jquery.js连个文件 该文件可以在我的另一篇《动态加载数据autoComplete(mysql数据库)》有源码/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<script type="text/javascript">
$().ready(function() {
function log(event, data, formatted) {
$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
}
function formatItem(row) {
return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, '');
}
$("#suggest1").focus().autocomplete(cities);
$("#suggest14").autocomplete(cities, {
matchContains: true,
minChars: 0
});
$("#suggest3").autocomplete(cities, {
multiple: true,
mustMatch: true,
autoFill: true
});
$(":text, textarea").result(log).next().click(function() {
$(this).prev().search();
});
$("#suggest4").result(function(event, data, formatted) {
var hidden = $(this).parent().next().find(">:input");
hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
});
$("#scrollChange").click(changeScrollHeight);
$("#clear").click(function() {
$(":input").unautocomplete();
});
});
function changeOptions(){
var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max));
if (max > 0) {
$("#suggest1").setOptions({
max: max
});
}
}
</script>
</head>
<body>
<div id="content">
<p>
<label>Single City (local):</label>
<input type="text" id="suggest1" />
<input type="button" value="Get Value" />
</p>
<p> </p>
<ol id="result"></ol>
</div>
<a href="autocompleteAjaxTag.jsp">autocompleteAjaxTag.jsp</a>
</body>
</html>
分享到:
相关推荐
js从jsp页面获取数据,jsp页面从数据库(mysql)获得数据,实现了在输入框内输入内容会有数据动态加载供选择
动态加载 autocomplete,在select中输入内容,会动态的加载数据
jquery autocomplete实现输入框内容自动提示,ajax从后台数据库获取数据源。_renderItem定制结果格式
jquery autocomplete 动态补全例子支持中文 ajax传递json数据 文件里有json数据拼接
2.创建数据表Book_info的表,添加数据往里面 3.打开AJAX Extendions选项卡,双击ajax中核心组件ScriptManager 4.打开AJAX Extendions选项卡,双击ajax中核心组件ScriptManager 5.设置AutoCompleteExtender的部分属性...
主要通过ajax通过json形式传输数据,以及缓存的使用。实现了输入框自动检索提示功能。 核心包为neverModules-autoComplete.js和gson-1.6.jar项目。
Ajax-autocomplete.zip,远程数据源的简单自动完成库。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况...
autocomplete插件原有功能,不...1 粘贴文本自动加载数据 2 滚动条滚动到底部加载更多数据 3 与页面插件联动更新数据(清除缓存) 4 增加插件赋值给一个隐藏域,就可以得到文本和值 (做asp.net的用起来比较方便) 博客说明 ...
角度自动完成 一个简单但功能强大的AngularJS指令,使您可以...下载代码,然后将autocomplete.js和autocomplete.html添加到页面中的文件中。 然后将此指令添加到您的索引或模块。 您可以在此项目中关注。 本地用法示例
官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll...在template中添加el-autocomplete <el-autocomplete placeholder="请输入studentID" v-mo
于是乎下载了一个jquery.autocomplete-1.1.3,但引用到项目后,发现几个问题,并相应做了修改: 1.中文输入后,服务端不能正常获取ajax提交的数据(此处,当然可以用相应转码,本人试了n种方便仍改),细看代码...
struts2的autocomplete控件,从我的一个项目里边拿出来的,单独可运行,只是jar包没有整理,控件中的数据并未从数据中获取,而是直接在action中添加的,简单明了
首先肯定还是加载bootstrap&jquery了,需要额外说明的是,后端返回的二维数组,和formatItem方法下面的调用保持一致即可; 另外,返回的数据要先parseJSON!切记。 相关参数说明: source:function(query,process){}。...
jQuery.autocomplete 是jquery的流行插件,,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
上面创建了两个新字段(一个是文本类型的克隆,另一个是隐藏的,用于将实际密码数据发送到服务器),然后从DOM中删除了原始的讨厌自动完成字段。 我将尽快添加实现细节。 抱歉,这是紧急上传。 参考: :
jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
加载多个自动完成输入(我无法使用现有的vue组件实现此目的) 获取找到的地址对象的地理位置数据(纬度,经度)以及其他地址数据(国家,城市,州,县,街道,门牌号,邮政编码)。 因此,无需在后端执行其他地址...
input class=layui-input name=keyword id=demoReload autocomplete=off> <button class=layui-btn data-type=reload>搜索</button></div> 在js加入初始化代码和定义加载方法 layui.use('table', ...
如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行程序。 有关更多信息,请参见关于的部分。npm run build 构建生产到应用程序build文件夹。 它在...
Zepto Autocomplete插件是一个微型js库(几KB),通过添加一个类并在页面加载时初始化插件,ZeptoJS用户可以轻松地在其文本框中插入“ autocomplete”功能。 自动完成的数据源可以是本地javascript Array对象,也...