jQuery implements Twitter's automatic text completion effects_jquery

The above effect can be achieved using the jQuery plug-in Typeahead.js. This jQuery plug-in comes from a new project of Twitter and supports remote and local data sets. The unique feature is that you can use local storage to save the data set locally, which effectively improves the user experience. It also has many options for handling remote data sets, such as (request frequency, maximum number of concurrent requests, etc.).

Main Features

Supports local data saving, client loading, optimized loading speed
Supports multiple languages ​​and supports Arabic
Support Hogan.js template engine integration
Supports assembly of multiple data sets
Supports local and remote data sets

Project Address

http://twitter.github.io/typeahead.js

How to use

First introduce the jQuery framework and the related JS and CSS files of the Typeahead.js plug-in into the head of the web page

Copy code The code is as follows:

<link href= "typeahead.min.css" rel= "stylesheet" >
<script src= "jquery-1.9.1.min.js" ></script>
<script src= "typeahead.min.js" ></script>

Then add the HTML element that you want to animate, such as

Copy code The code is as follows:

<input id= "demo" class = "typeahead" type= "text" placeholder= "test" >

FinallyInitialization

Copy code The code is as follows:

view source
$( '#demo' ).typeahead({
name: 'test' ,
local: [ "Site518" , "Lwolf" ],
limit: 10
});