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
jQuery 多结果搜索 Tokeninput

Vertical list style item selection

jQuery 多结果搜索 Tokeninput
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

 

更多参考:

谷歌无地图地址自动完成Google Places AutoComplete example without using Maps

优秀的 jQuery 文本输入框自动完成 & 自动提示插件

jQuery : ddSlick 自定义select下拉框 custom drop down with images and description.

 

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

 

One Comment

Leave a Reply