<!doctype html>
<html>
<head>
<meta name="content-type" content="text/html; charset=gbk">
<title>jQuery UI Autocomplete - 默认功能</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
//这里 数据是数组的形式
var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC",
"C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
"Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp",
"Perl", "PHP", "Python", "Ruby", "Scala", "Scheme","中国","国家" ];
$("#tags").autocomplete({
source : availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">检索: </label> <input id="tags">
</div>
</body>
</html>

效果图:

  aaarticlea/png;base64,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" alt="" />

  aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUoAAABhCAIAAAA/V38TAAAE8klEQVR4nO3dPY7bOBiAYZ3FF+AxfAreQBdhpXskCERgy2yaXGAhQF2KCWaBBRKkSLvVbCF59EeJ9OfR6BP3fcDK0XgUA68oU/K4+PbzXwaDkeUoDt8DBoOx0yBvBiPbQd4MRraDvBmMbEfx4c+/GAxGlqN4AZAp8gayRd5AtsgbyBZ5A9kibyBb5A1ki7yBbJE3kK1z5/30/fnzl68fP/3BYCgcn798ffr+fGAg5877+e+fP379PnovgLAfv35/e/rnwB04fd5H7wKwhbzlHs+7KM79CkA58pYjbyhH3nLkDeXIW468odwJ8m7bNvCo9/7uXyf5mQ3RvMN7PkLe2NUZ8namKKwPPGhcJJ8Zb4vlM8lF847+PvLGrs6R96Lj1pnCOufuS9XbaWytM3cfIkbis3dgzyfIG7s6Z97eFsa1L60z63Nj60wR0T3HnceIAXlDuRPl3TrbtTKqJhrQxHz2ftA079fdGz+03Lv+yNQhb+xKb96L2dc474z1sym722xZrbehx5Ybts4sHvS2KBLepc/zjp4t3P4j1vd9kzd2pTfvm+kbZG8Ds3WfYzHZLnw27gKPW+umzynKO3DwCMze06MJeWNX+vMetbYy+y6D93a2rO5tUVh/u1I1HCO8C53akzfyoD5vb7tZuQ90MS0b126vjs2vq3VPaBZvlO9H3lBOe97eFsaYfpl81Mr4DpVb+eEfX56gP9x1j7yhnPK8vbV+EsnrjWDD0lnrjHE+doPY+C18twr2cOfSpTXyxjtRnXd3rWma9+jqWN9J9HLX7fx+/uThJfd0i7wDUzWzNw6kOO9bydNIXq+L3ULZqDu8fD6cpG+c1afgthYopzfv1vvgrSu3+0L6h6N3ro3+dXmNe+XjKqKV8+CvJ28cSG/er2aRrEzm64arZKMJf7Ne8kYezpH3amnDnaDr87BxbX8qMH2m9YjfKu/JDagh5I1dnSfvhJXpSY/jT2MOb8JnuQU/bJoq6QOhm09O3tjVefJO2bIdXfhKu7/tEQl5R/abvLGrE+StFn+MCcqRtxx5QznyliNvKEfecnxLCZQjbzm+Ywya8R1jD/kAnMFRgZw+76N3AYggbyHyhn7kLUTe0I+8hcgb+pG3EHlDP/IWIm/oR95C5A39yFuIvKEfeQvd/8I1TbPLngBryFvo/heuLi+XS1nHNmuq6yXRteKAgS3kLSSYvatrSo9pmyU+Gf7fyFvoqLzr8nIpa/JGCvIWirxwTVXO6wsVWZeLM+x+s7oMn5CX9ctLXVU1eSOOvIWieae+g76WdTP7yXm46wcBYAt5C8VeuLqcL6MFimyq62KxjbzxZshb6JC8m+rar5eTNxKQt9DueYdO77t/qOuGvJGCvIUOmL3H5+jkjQTkLfRmS2v3nJzX5WU4TSdvxJC3UDzvhNWwu5fWmurabU/eSEDeQu95W8vsrJzbWpCIvIX2zbuenNt3OQ+ra3VZVuSNOPIW4p5z6EfeQqJPjCXmLVyUA2bIW0j2gdCEIpNnb/JGDHkLSfJO6pG/+oA3Q95C/DEm6EfeQuQN/chbiLyhH3kLkTf0I28h8oZ+5C1E3tCPvIUe/1514B0cFci58wawgbyBbJE3kC3yBrJF3kC2yBvIFnkD2SJvIFvkDWSLvIFskTeQLfIGskXeQLbIG8gWeQPZIm8gW+QNZIu8gWz9B/mil3EqWix2AAAAAElFTkSuQmCC" alt="" />

参考:

  http://jqueryui.com/autocomplete/

  http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html

主要是为了与solr搜索的自动提示功能 结合.

jQuery autocomplete -默认的更多相关文章

  1. [转]jQuery.Autocomplete实现自动完成功能(详解)

    本篇文章除了介绍jquery.autocomplete基本参数外,主要说明jquery.autocomplete的数据源的格式问题.     1.jquery.autocomplete参考地址 htt ...

  2. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  3. jQuery.Autocomplete实现自动完成功能(详解)

    1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://do ...

  4. Jquery autocomplete插件的使用

    简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  5. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

  6. Jquery AutoComplete的使用方法实例

    jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项 ...

  7. jQuery.Autocomplete实现自动完成功能-搜索提示功能

    $(function(){ var availableTags=["ads","abc","acc"]; $("#tags&quo ...

  8. jQuery Autocomplete 备忘录

    之前使用过此 widget,如今再次需要,发现很多东西已经记不起来了,当然之前用的版本也不一样. 使用之前当然是先认真阅读官方的说明文档和示例,这点很重要,而不是东一块西一点的去网上瞎找资料.Opti ...

  9. 一场由股票提醒助手插件引发的血案——浅入浅出 jquery autocomplete

    我没有学过前端,所以这篇文章注定要班门弄斧了. 通常,须要用到什么技术什么语言时,我才去学,学了也不一定掌握,就是记不住!所以如今明确了.学习的时候,亦或是攻克难点的时候,一定要记录下来.并不一定非要 ...

随机推荐

  1. bzoj 4530 [Bjoi2014]大融合——LCT维护子树信息

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4530 LCT维护子树 siz .设 sm[ ] 表示轻儿子的 siz 和+1(1是自己的si ...

  2. Oracle导出导入表空间创建

    //备份数据库前的sqlplus命令创建数据库dmp存入目录 sqlplus /nolog conn /as sysdba SQL> create or replace directory ex ...

  3. 页面初始加载的是默认刷新一次(f5)

    参考找不到了,不好意思.. 两种可以都试一下,解决问题就好了. 1.----------- <script type="text/javascript"> window ...

  4. Spring security 如何设置才能避免拦截到静态资源

    问题:继承FilterSecurityInterceptor自定义Spring security拦截器,但是每次都拦截了css等静态资源,应该如何设置? @Override protected voi ...

  5. 汇编_指令_DS*10H的含义

    在8086存储器系统中,20位地址总线的地址是物理地址.但是由于8086内部寄存器都是16位的, 用16位寄存器直接访问20位存储器空间显然不可能,所以8086CPU使用了存储器分段的办法.这 样内存 ...

  6. 01:Sysbench 基准压测 IO篇

    line:V1.1 mail: gczheng@139.com date: 2017-11-17 一.Sysench测试前准备 1.1.压测环境 配置 信息 主机 Dell PowerEdge R73 ...

  7. 阶段性总结(PHP-Session)

    PHP Session PHP session 变量用于存储关于用户会话(session)的信息,或者更改用户会话(session)的设置.Session 变量存储单一用户的信息,并且对于应用程序中的 ...

  8. C和指针 第三章--数据

    简要概述: <C和指针>第三章对数据进行了描述. 其中主要讲解了---变量的三个属性:作用域.链接属性和存储类型. 这三个属性决定了该变量在“什么地方可以使用”以及“该变量的值能够保持多久 ...

  9. JS中的定时器

    在JS中的定时器分两种: 1,setTimeout() 2,setInterval() setTimeout(): 只在指定时间后执行一次: function hello(){ alert('hell ...

  10. django-bower

    https://django-bower.readthedocs.io/en/latest/usage.html