首页 > 其他分享 >jQuery 多结果自动完成搜索 Tokeninput Autocomplete Text Entry

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

时间:2023-03-29 16:09:50浏览次数:37  
标签:jQuery style Tokeninput Text results item items


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>


标签:jQuery,style,Tokeninput,Text,results,item,items
From: https://blog.51cto.com/u_8895844/6157191

相关文章