jQuery 多结果自动完成搜索 Tokeninput Autocomplete Text Entry

Overview

Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.

 

Features

• Intuitive UI for selecting multiple items from a large list
• Easy to skin/style purely in css, no images required
• Supports any backend which can generate JSON, including PHP, Rails, Django, ASP.net
• Smooth animations when results load
• Select, delete and navigate items using the mouse or keyboard
• Client-side result caching to reduce server load
• Crossdomain support via JSONP
• Callbacks when items are added or removed from the list
• Preprocess results from the server with the onResult callback
• Programatically add, remove, clear and get tokens
• Customize the output format of the results and tokens

Screenshots

jQuery 多结果搜索 Tokeninput

Vertical list style item selection

jQuery 多结果搜索 Tokeninput

Facebook style item selection

 

用法：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="yourfiles/jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css" href="yourfiles/token-input.css" />

<script type="text/javascript">
$(document).ready(function () {
    $("#my-text-input").tokenInput("/url/to/your/script/");
});
</script>

 

 

原文：http://loopj.com/jquery-tokeninput/

下载：loopj-jquery-tokeninput-jquery-tokeninput-1.6.0-0-g201d2d1

项目地址：https://github.com/loopj/jquery-tokeninput

实例：http://loopj.com/jquery-tokeninput/demo.html

 

本文：jQuery 多结果自动完成搜索 Tokeninput Autocomplete Text Entry