jQuery 多结果自动完成搜索 Tokeninput Autocomplete Text Entry-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_5904/article/details/82637830

Tokeninput是一款jQuery插件，提供直观的用户界面用于从大型列表中选择多个项，并支持自动完成功能。此插件易于定制样式且适用于多种后端环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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