前端自动提示功能插件-typeahead
typeahead
https://npm.taobao.org/package/npm-typeahead
A lightweight web-app that implements typeahead search functionality for npm packages.
Try it out here: http://npm-typeahead.herokuapp.com
The Motivation
npm-typeahead was put together as part of an article for CODE Magazine. It's an attempt to demonstrate Node.js best practices, and covers:
- using node-restify, to get a bare-bones server up and running.
- using browserify, to install client-side dependencies using npm (such as typeahead.js)
- using mocha, to wrie unit tests.
https://github.com/twitter/typeahead.js
typeahead.js is a fast and fully-featured autocomplete library http://twitter.github.com/typeahead.js/
typeahead.js
Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.
The typeahead.js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but when used together, they can provide a rich typeahead experience.
例子
npm包
https://www.npmjs.com/
https://twitter.github.io/typeahead.js/examples/
$(document).ready(function() { // the basics
// ---------- var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex; // an array that will be populated with substring matches
matches = []; // regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
}); cb(matches);
};
}; var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
]; $('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
}); // bloodhound
// ---------- // constructs the suggestion engine
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: states
}); $('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: states
}); // prefetch
// -------- var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// url points to a json file that contains an array of country names, see
// https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
prefetch: '../data/countries.json'
}); // passing in `null` for the `options` arguments will result in the default
// options being used
$('#prefetch .typeahead').typeahead(null, {
name: 'countries',
source: countries
}); // remote
// ------ var bestPictures = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '../data/films/post_1960.json',
remote: {
url: '../data/films/queries/%QUERY.json',
wildcard: '%QUERY'
}
}); $('#remote .typeahead').typeahead(null, {
name: 'best-pictures',
display: 'value',
source: bestPictures
}); // default suggestions
// ------------------- var nflTeams = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function(obj) { return obj.team; },
prefetch: '../data/nfl.json'
}); function nflTeamsWithDefaults(q, sync) {
if (q === '') {
sync(nflTeams.get('Detroit Lions', 'Green Bay Packers', 'Chicago Bears'));
} else {
nflTeams.search(q, sync);
}
} $('#default-suggestions .typeahead').typeahead({
minLength: 0,
highlight: true
},
{
name: 'nfl-teams',
display: 'team',
source: nflTeamsWithDefaults
}); // custom templates
// ---------------- $('#custom-templates .typeahead').typeahead(null, {
name: 'best-pictures',
display: 'value',
source: bestPictures,
templates: {
empty: [
'<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
}
}); // multiple datasets
// ----------------- var nbaTeams = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '../data/nba.json'
}); var nhlTeams = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '../data/nhl.json'
}); $('#multiple-datasets .typeahead').typeahead({
highlight: true
},
{
name: 'nba-teams',
display: 'team',
source: nbaTeams,
templates: {
header: '<h3 class="league-name">NBA Teams</h3>'
}
},
{
name: 'nhl-teams',
display: 'team',
source: nhlTeams,
templates: {
header: '<h3 class="league-name">NHL Teams</h3>'
}
}); // scrollable dropdown menu
// ------------------------ $('#scrollable-dropdown-menu .typeahead').typeahead(null, {
name: 'countries',
limit: 10,
source: countries
}); // rtl
// --- var arabicPhrases = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
"الإنجليزية",
"نعم",
"لا",
"مرحبا",
"أهلا"
]
}); $('#rtl-support .typeahead').typeahead({
hint: false
},
{
name: 'arabic-phrases',
source: arabicPhrases
});
});
Bootstrap typeahead
https://github.com/bassjobsen/Bootstrap-3-Typeahead
Using JSON objects instead of simple strings You can add all the properties you wish on your objects, as long as you provide a "name" attribute OR you provide your own displayText method. The other values allow you to match the selected item with something in your model. var $input = $(".typeahead");
$input.typeahead({
source: [
{id: "someId1", name: "Display name 1"},
{id: "someId2", name: "Display name 2"}
],
autoSelect: true
});
$input.change(function() {
var current = $input.typeahead("getActive");
if (current) {
// Some item from your model is active!
if (current.name == $input.val()) {
// This means the exact match is found. Use toLowerCase() if you want case insensitive match.
} else {
// This means it is only a partial match, you can either add a new item
// or take the active if you don't want new items
}
} else {
// Nothing is active so it is a new value (or maybe empty value)
}
});
前端自动提示功能插件-typeahead的更多相关文章
- Eclipse配置PHP及自动提示功能
Eclipse是一个开发工具,具有强大的插件功能,虽然用于Java理所当然,但为PHP所用,也为尝不可.虽然我一直用的是notepad,但发现开发工具也可以省去一些不必要的记忆. 言归正传,下面就来实 ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
- jquery 实现邮箱输入自动提示功能:(二)
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- jquery 实现邮箱输入自动提示功能:(一)
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- eclipse代码自动提示设置、如何配置eclipse的代码自动提示功能(同时解决自动补全变量名的问题)?
对于编程人员来说,要记住大量的类名或类方法的名字,着实不是一件容易的事情.如果要IDE能够自动补全代码,那将为我们编程人员带来很大帮助. eclipse代码里面的代码提示功能默认是关闭的,只有输入“. ...
- VIM配置自动提示功能
问题描述: 使用VIM作为Linux下的IDE,但是VIM默认情况下不支持自动代码提示功能,因此希望安装插件实现自动提示功能,目前找到的自动提示工具,非常好用 ...
- ASP.NET输入文本框自动提示功能
在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...
- 如何在myeclipse中实现jquery的自动提示功能
在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料 jquery 1.8.3.js ...
- eclipse自动提示功能没了的解决办法(转载)
eclipse自动提示功能没了的解决办法 标签: eclipse联想 2012-08-09 14:32 24687人阅读 评论(7) 收藏 举报 分类: Android(38) 版权声明:本文为博 ...
随机推荐
- C# 直接引用js文件,调js里的数据
C# 直接引用js文件,调js里的数据 引入命名空间 using System.IO; string path = AppDomain.CurrentDomain.BaseDirectory + &q ...
- Docker-通过docker-maven-plugin插件实现docker镜像构建并自动发布到远程docker服务器
我们知道,docker能实现应用打包隔离,实现快速部署和迁移.如果我们开发应用使用了spring cloud + spring boot架构,那么,通过docker-maven-plugin实现快速构 ...
- Centos7 安装mysql-8.0.13(rpm)
yum or rpm? yum安装方式很方便,但是下载mysql的时候从官网下载,速度较慢. rpm安装方式可以从国内镜像下载mysql的rpm包,比较快.rpm也适合离线安装. 环境说明 操作系统: ...
- 24G的SSD有什么用
有台12G内存,带24G的SSD的笔记本,系统自带WINDOWS8,最近感觉很慢,就动手把1T的硬盘升级到512的SSD. BIOS里面明明看到24G的SSD,Windows里面就消失了(应该是坏掉了 ...
- 使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js
前言:前端小白一枚,刚注册博客,先发个学习过程中新碰到小问题试试水吧~ 摘要:最近在学习bootstrap,偶然碰到了一个小问题,bootstrap网站也没有做过多的解释,今天分享给大家. 问题描述: ...
- vue 利用mockJs 模拟数据
工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE + Element-ui + springboot 写的,由于需求没有定,先画一个de ...
- 【spring源码分析】IOC容器初始化(九)
前言:上篇文章末尾提到createBeanInstance方法中使用工厂方法实例化Bean对象,本文将对该方法进行分析. AbstractAutowireCapableBeanFactory#inst ...
- python学习——读取染色体长度(一、简化问题)
# 读取fasta # 解析每条序列的长度 chr1_len = 10 chr2_len = 20 chr3_len = 30 chr4_len = 40 chr5_len = 50 # 求和 tot ...
- 数据结构学习之栈求解n皇后问题
数据结构学习之栈求解n皇后问题 0x1 目的 深入掌握栈应用的算法和设计 0x2 内容 编写一个程序exp3-8.cpp求解n皇后问题. 0x3 问题描述 即在n×n的方格棋盘上,放置n个皇后 ...
- python定时执行任务的三种方式
#!/user/bin/env python # @Time :2018/6/7 16:31 # @Author :PGIDYSQ #@File :PerformTaskTimer.py #定时执行任 ...