`
elfasd
  • 浏览: 100257 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

typeahead基本使用

    博客分类:
  • JS
阅读更多

typeahead的基本使用,其实就是官网上的一些例子的源代码,这个的效果不错,大家可以试试,用到项目中也是个不错的选择。

官网网址:https://github.com/twitter/typeahead.js

例子,源代码,代码发布记录等全部可以找到。

附件typeahead.zip是从上面下载的源代码

附件json-creator.zip是生成测试json的测试类

不多说了,简单的功能不一般的实现,看看例子应该就明白了

 

但是在应用的时候发现了一些问题,就是remote的调用问题,在论坛上咨询了J Harding,他也没有给出很好的解决方案

Well if you want to load data through remote, you'll have to handle the filtering/sorting of the data server-side.

If you want to use prefetch and periodically update the data, you could do something like:

function updateTypeahead() {
  $('.typeahead')
  .typeahead('destroy')
  .typeahead({ prefetch: '/data.json' });
}

updateTypeahead();
setInterval(updateTypeahead, UPDATE_INTERVAL);

This will prevent any localStorage caching (because there is no name property) and will result in the backing data being updated every UPDATE_INTERVAL milliseconds.

 

总体来说,typeahead对实时性的支持不强,也许Jake Harding会在0.9.4以后的版本中改进。

如果使用remote方法,正如J harding所说的,只能在后台对数据进行拦截处理

使用prefetch的话,就如上面代码提示的,但是使用IE的时候,会有恶心的缓存问题,加个时间戳啥的吧

 

 

 

1
2
分享到:
评论

相关推荐

    bootstrap-typeahead 3

    下面我们将深入探讨Bootstrap Typeahead 3的主要特性和使用方法。 首先,Bootstrap Typeahead 3的核心功能是提供搜索提示,当用户在输入框中键入字符时,它会根据预定义的数据源显示匹配的建议。这不仅提高了用户...

    bootstrap-typeahead.js

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,上传的包括两个文件一个bootstrap-typeahead.js和一个underscore-min.js,前者基本上可以满足一般需求了,后一个js是使用对象数据时...

    twitter-bootstrap-typeahead-master

    1. **基本使用** 在 HTML 结构中,你需要为输入框添加 `data-provide="typeahead"` 属性,以标记这是一个 Typeahead 输入框。同时,可以设置 `data-source` 或通过 JavaScript 配置数据源。例如: ```html ...

    Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

    1. **基本使用** 在最简单的用例中,Typeahead可以通过HTML属性`data-provide="typeahead"`和`data-source`直接在输入框中设置。例如: ```html <input id="product_search" type="text" data-provide="typeahead...

    Bootstrap-3-Typeahead

    1. **基本使用**:在HTML中,你需要包含Bootstrap的CSS和JS,以及Typeahead的JS文件。然后,通过添加`data-provide="typeahead"`属性到`<input>`元素,就可以启用Typeahead功能。 2. **数据源**:Typeahead可以使用...

    使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

    Bootstrap Typeahead插件是用于创建输入框自动补全功能的一个工具,它与Twitter的...同时,了解基本的网络请求机制(如JSONP)和正则表达式也是解决问题的关键。记住,技术文档和社区资源是解决问题的重要途径。

    react-bootstrap-typeahead-master.rar

    在深入探讨 React-Bootstrap-Typeahead 的具体细节之前,让我们先了解一些基本概念: 1. **React.js**:React 是 Facebook 开发的一个 JavaScript 库,用于构建用户界面,尤其是单页面应用。它采用声明性编程方式,...

    vue-typeahead-bootstrap:Vue 2和Bootstrap 4的autocompletetypeahead组件

    这是开始的基本步骤。 以下是使项目在本地运行的步骤: 克隆git clone git@github.com:mattzollinhofer/vue-typeahead-bootstrap.git : git clone git@github.com:mattzollinhofer/vue-typeahead-bootstrap.git ...

    Flutter的TypeAhead自动填充小控件以在其中键入内容时向用户显示建议

    使用TypeAhead控件,我们需要做以下几步: 1. **安装依赖**:在`pubspec.yaml`文件中添加TypeAhead库的依赖,并执行`flutter pub get`来安装。 ```yaml dependencies: flutter_typeahead: ^3.1.7 ``` 2. **导...

    angular-laravel-typeahead:使用 AngularJS 和 Laravel 进行简单的预先输入

    通过这个项目,你将了解如何结合 AngularJS 和 Laravel 实现一个基本的 Typeahead 功能。这只是一个起点,你可以进一步扩展这个应用,例如添加更多过滤选项、自定义样式,或者集成其他功能,如自动填充和缓存。

    angular-typeahead-directive:一个基本的 angular typeahead 指令

    该"angular-typeahead-directive"是一个基本的实现,它允许开发者为输入框添加自动补全功能。在JavaScript中,指令是AngularJS的核心特性之一,它们可以扩展HTML的功能,使得HTML能够更好地与应用程序的数据模型交互...

    typeaheadjs:[READONLY] typeahead.js的凉亭

    描述提到`typeahead.js`的源代码包含有引导主题的CSS,这意味着这个压缩包不仅提供了`typeahead.js`的基本库文件,还整合了Bootstrap的视觉样式。Bootstrap是一个流行的前端开发框架,它的CSS样式可以使得`typeahead...

    Bootstrap3使用typeahead插件实现自动补全功能

    以上就是Bootstrap3使用Typeahead插件实现自动补全功能的基本流程和关键点。开发者可以根据实际需求调整配置,例如设置提示(hint)、高亮(highlight)和最小输入长度(minLength),以及自定义事件处理,来实现更...

    typeahead

    Typeahead的基本原理是监听用户的输入事件,当用户在输入框中输入字符时,后台会触发一个搜索请求,这个请求通常发送到服务器,根据输入的字符查询匹配的数据。返回的结果将被用来展示在输入框下方的建议列表中。...

    jQuery百度搜索自动补全插件.zip

    3. **绑定事件**:使用jQuery选择器找到搜索框元素,然后调用typeahead方法,传入配置对象,包括数据源、模板、匹配函数等参数。 4. **自定义模板**:typeahead.js允许你定制补全结果的展示样式,可以使用Mustache...

    svelte-typeahead:可访问的模糊搜索预先输入组件

    您可以使用[data-svelte-typeahead]选择器来定位组件。 : global ([ data-svelte-typeahead ]) { margin : 1 rem ;}基本的将对象数组传递给data道具。 使用extractor指定要搜索的键值。 < script > import ...

    typeahead:引导程序提前输入

    实现typeahead的基本步骤如下: 1. **引入库**:首先需要在HTML文件中引入typeahead库的JavaScript和CSS文件,可以通过CDN链接或者本地文件引用。 2. **创建数据源**:数据源可以是数组、JSON对象或者远程API接口...

    angular-typeahead-example:提前角度输入示例

    要开始使用这个"angular-typeahead-example"项目,你需要先确保安装了Node.js和npm(Node包管理器)。接下来,你可以按照以下步骤操作: 1. 在命令行中导航到项目文件夹:`cd angular-typeahead-example-master` 2....

Global site tag (gtag.js) - Google Analytics