注意需要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>
分享到:
相关推荐
标题中的"autoComplete动态从数据库加载数据"是指在前端网页应用中使用JavaScript(js)实现自动补全功能,这项功能通常被用于输入框,当用户输入文字时,系统会从数据库(这里是MySQL)中实时查询匹配的数据并显示...
动态数据 autocomplete 是一种常见的前端交互功能,主要用于提升用户体验,特别是在数据量大或用户需要搜索特定信息时。在 Web 应用中,用户在输入框(如 select 或输入文本框)中键入字符时,系统会根据输入内容...
在给定的“jquery autocomplete 动态补全例子”中,我们将探讨如何实现这一功能,特别关注如何通过AJAX加载JSON数据。 **jQuery Autocomplete基本原理** jQuery UI库包含了Autocomplete组件,它可以与普通的HTML...
这个组件通过与后端服务器进行异步通信(通常使用 AJAX 技术)来获取数据源,并在用户输入时动态显示匹配的选项。在本教程中,我们将深入探讨如何利用 jQuery UI 的 Autocomplete 功能,以及如何自定义 `_renderItem...
在处理大量数据时,为了提高性能,可以使用本地缓存或预加载数据。另外,服务器端的响应速度也很关键,可以使用分页策略或者模糊匹配算法来减少请求的数据量。 总结来说,jQuery Autocomplete是一个强大的工具,...
jQuery Autocomplete 是基于 jQuery 库的一个扩展,它允许开发者创建动态的、实时的搜索建议。用户在输入框中输入字符时,插件会根据预设的数据源提供匹配的建议列表。这种功能在各种需要用户输入搜索关键词或者...
在探讨如何利用jQuery的AutoComplete插件结合Ajax与JSON数据实现自动补全功能之前,我们首先需要理解几个关键概念:jQuery、Ajax、JSON以及AutoComplete。 ### jQuery简介 jQuery是一款快速、简洁的JavaScript库,...
`jQuery autocomplete` 结合`Ajax`技术,可以实现异步加载数据,即当用户输入时,通过Ajax请求后台服务,获取匹配的建议数据,而无需刷新整个页面。这种方式不仅提高了响应速度,还节省了网络带宽。 在描述中提到的...
这个"jQuery-Autocomplete-master"压缩包提供了一个简单的示例,用于演示如何利用jQuery实现自动补全功能,同时支持通过AJAX动态获取数据以及从本地加载数据。 1. **jQuery Autocomplete 插件**: jQuery ...
这个例子展示了如何配置和使用jQuery Autocomplete.js,以及如何与服务器进行交互,实现动态数据加载和选中项的处理。 ### 5. 结论 jQuery Autocomplete.js 插件是提高网页表单输入效率的好帮手,通过与Ajax的结合...
4. **异步数据加载**:通常,提示数据是从服务器端获取的。layui会根据用户的输入向`url`指定的接口发送请求,你可以通过返回JSON格式的数据来响应这些请求。例如,服务器端返回如下数据: ```json [ {"id":1,...
此外,jQuery Autocomplete还支持异步加载数据,这在处理大量数据或远程数据源时非常有用。通过设置`source`参数为一个返回Promise或使用AJAX的函数,我们可以从服务器获取数据,从而实现动态的、延迟加载的自动填充...
要使用 AutoComplete,你需要在输入框上添加 `autocomplete` 属性,并指定一个方法名,该方法将处理用户输入并返回建议列表。例如: ```html <input type="text" id="search-box" autocomplete="off"> ``` 然后,在 ...
jQuery Autocomplete 主要通过监听用户的输入事件,然后根据预定义的数据源动态地生成下拉建议列表。数据源可以是静态数组、AJAX 请求返回的结果或者远程 API。当用户在输入框中输入字符时,插件会过滤数据源中的项...
Typeahead.js是Twitter开发的一个轻量级插件,它支持异步数据加载,对于大量数据或动态数据源非常适用。Typeahead.js可以通过Bloodhound库来处理复杂的预过滤和预加载策略,提高性能。此外,它还允许用户自定义模板...
- **异步加载**:在大型数据集的情况下,Autocomplete 可以通过异步方式从服务器获取数据,避免一次性加载所有数据导致页面性能下降。 - **多数据源支持**:数据可以来自静态数组、函数调用、或者远程API请求,适应...
- **异步加载**:根据输入长度动态加载数据,降低初始加载量。 总的来说,`jQuery-autocomplete` 是一个强大且灵活的自动补全解决方案,它的可配置性和易于扩展性使其能够适应各种项目需求。通过熟练掌握其基本使用...
jQuery Autocomplete 是基于 jQuery 库的一个插件,它提供了一个简单的接口,允许开发者快速地为输入框添加自动提示功能。这个插件可以从用户输入的字符中匹配预定义的数据集,并在输入框下方显示匹配结果。它不仅...
此外,还可以添加一些额外的交互,如预加载下一页,或者在用户输入时动态调整每页的条目数。 5. **优化性能**:为了确保性能,避免在用户输入时频繁发起请求,可以设定一个延迟,例如使用 jQuery 的 `debounce` ...
8. **性能优化**:当数据源非常大时,需要注意性能优化,比如使用懒加载技术,只在需要时加载部分数据,或者对输入进行预处理,减少不必要的计算。 9. **错误处理和调试**:在开发过程中,理解和处理可能出现的错误...