BootstrapPlugin - typeahead-ex 使用笔记
1) bootstrap官方的typeahead插件不支持ajax方式展示数据。这个插件作为扩展，让typeahead有了ajax的功能。
留档备份。
2) 官方文档 & 官方DEMO
https://github.com/tcrosen/twitter-bootstrap-typeahead
3) 代码
<!DOCTYPE HTML>
<html lang="zh">
<head>
<title>Bootstrap Base</title>
<base href="<%=basePath %>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-typeahead-ex.js"></script>
<script type="text/javascript" src="js/mockjax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("[rel='tooltip']").tooltip({placement: "right"});
$('#input1').typeahead({
source: [
{ id: 1, name: 'Toronto' },
{ id: 2, name: 'Montreal' },
{ id: 3, name: 'New York' },
{ id: 4, name: 'Buffalo' },
{ id: 5, name: 'Boston' },
{ id: 6, name: 'Columbus' },
{ id: 7, name: 'Dallas' },
{ id: 8, name: 'Vancouver' },
{ id: 9, name: 'Seattle' },
{ id: 10, name: 'Los Angeles' }
],
display: 'name',
val: 'id',
itemSelected: function(item, value, text) {
alert(value);
alert(text);
}
});
// ----------------------------------------------------------------------
$('#input2').typeahead({
ajax: {
url: "ajax/test",
method: "GET",
triggerLength: 1,
preProcess: function(data) { // 这个方法非常重要！
// 本插件要求处理一个javascript对象而不是一个json字符串
// 同时应当注意 $.parseJSON方法要求的json字符串必须用双引号引用属性名！
return $.parseJSON(data);
}
},
itemSelected: function(item, value, text) {
alert(value);
alert(text);
}
});
});
</script>
</head>
<body>
<label>输入框1 <input type="text" id="input1" /></label>
<br/>
<label>输入框2 <input type="text" id="input2" /></label>
</body>
</html>
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/ajax")
public class AjaxController {
@ResponseBody
@RequestMapping(value = "/test", method = { RequestMethod.GET })
public String test(@RequestParam("query") String query)
{
return "[{ \"id\": 1, \"name\": \"New York\" }, { \"id\": 2, \"name\": \"Shanghai\"}]";
}
}
分享到：
相关推荐
这个项目的源代码存放在`react-bootstrap-typeahead-master`这个压缩包中。 首先，我们要理解React。React是Facebook开发的一个JavaScript库，专门用于构建用户界面，尤其适合构建单页应用。它的核心理念是使用组件...
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete，功能很强大,上传的包括两个文件一个bootstrap-typeahead.js和一个underscore-min.js,前者基本上可以满足一般需求了，后一个js是使用对象数据时...
前端项目-bootstrap-3-typeahead,bootstrap 3 typeahead：Twitter的bootstrap 2的typeahead自动完成插件，可以与bootstrap3一起使用。
Bootstrap Typeahead 3 是一个基于流行的前端框架Bootstrap的动态搜索建议插件，它为用户提供了实时搜索...在"Bootstrap-3-Typeahead-master"这个压缩包中，应包含了该插件的源码、示例和文档，方便进一步学习和定制。
玩笑提前打字按文件名或测试名称过滤测试用法安装安装jest （它需要 Jest 26+）和jest-watch-typeahead yarn add --dev jest jest-watch-typeahead# or with NPMnpm install --save-dev jest jest-watch-typeahead将...
Bootstrap 的 Typeahead 依赖于其自身的 JavaScript 组件和 jQuery 库，因此在使用前需确保已引入这两个库。 1. **基本使用** 在 HTML 结构中，你需要为输入框添加 `data-provide="typeahead"` 属性，以标记这是一...
在使用 React-Bootstrap-Typeahead 时，你需要将库导入项目，配置数据源，定义选项的呈现方式，并将组件嵌入到你的 JSX 代码中。通过以上特性，你可以创建出强大且可定制的类型提示组件，提升用户在 Web 应用中的...
7. **性能优化**: 为了保证在大量数据下依然有良好的性能表现，CoreJS-Typeahead可能使用了诸如debounce（防抖）或throttle（节流）等策略，限制输入事件的处理频率，防止频繁触发昂贵的操作。 8. **可扩展性与模块...
vue-typeahead-bootstrap 使用Bootstrap 4和Vue 2的基于list-group的简单预输入/自动完成 这是一些实时示例，请 入门 文献资料 贡献 请注意，主动开发已在main分支上完成。 欢迎公关！ 这是开始的基本步骤。 以下...
vue-bootstrap-typeahead 使用Bootstrap 4和Vue 2的基于list-group的简单预输入/自动完成 安装 从NPM： > npm i vue-bootstrap-typeahead --save 缩小的UMD和CommonJS版本位于“ dist”文件夹中。 该组件也可以...
前端项目-typeahead-addresspicker,使用Twitter和新的谷歌地图API:placesseservice和autocompleteservice中的typeahead autocomplete快速完全重写jquery地址选择器插件
这可能涉及到下载 "angualr-typeahead-master" 压缩包并将其内容添加到项目的适当位置。 - 接着，在 AngularJS 应用的模块中声明对 "angular-typeahead" 的依赖。 - 然后，在HTML模板中使用 `typeahead` 指令，并...
为了自定义每条建议的显示样式，Typeahead.js允许使用模板引擎来渲染匹配项。这可能涉及使用Mustache、Handlebars等模板语言，将数据对象转换为HTML字符串。 9. **调试和优化**： 开发过程中，开发者可能会利用...
请注意，文档和示例适用于最新版本，如果您使用的是过时的版本，则可能不再适用。 安装 npm install --save react-bootstrap-typeahead 要么 yarn add react-bootstrap-typeahead 在您的项目中包括模块： import {...
Ajax-typeahead.zip,快速、轻量级的预输入增强文本输入。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的...
Bootstrap-typeahead.js-with-Codeigniter 使用 Codeigniter 中的预先输入功能 ###Download 下载最新的 。 在 jQuery 和 Bootstrap Javascript 之后将它包含在您的源代码中。 ＃＃＃控制器 <?php defined ( '...
您可以使用[data-svelte-typeahead]选择器来定位组件。 : global ([ data-svelte-typeahead ]) { margin : 1 rem ;}基本的将对象数组传递给data道具。 使用extractor指定要搜索的键值。 < script > import ...
使用此模块，您将获得： 使用角度指令易于使用的Type Ahead功能缓存结果以避免多次Ajax调用（用户可以定义自己的缓存函数来决定何时进行Ajax调用） 支持多种选择使用步骤： 在脚本和CSS中包含ng-TypeAhead [removed...