效果图：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> title </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <style>

    body{

        font: 62.5% "Trebuchet MS", sans-serif;

        margin: 50px;

    }

    .demoHeaders {

        margin-top: 2em;

    }

    #dialog-link {

        padding: .4em 1em .4em 20px;

        text-decoration: none;

        position: relative;

    }

    #dialog-link span.ui-icon {

        margin: 0 5px 0 0;

        position: absolute;

        left: .2em;

        top: 50%;

        margin-top: -8px;

    }

    #icons {

        margin: 0;

        padding: 0;

    }

    #icons li {

        margin: 2px;

        position: relative;

        padding: 4px 0;

        cursor: pointer;

        float: left;

        list-style: none;

    }

    #icons span.ui-icon {

        float: left;

        margin: 0 4px;

    }

    .fakewindowcontain .ui-widget-overlay {

        position: absolute;

    }

    select {

        width: 200px;

    }

    </style>

  <link href="jquery-ui.css" rel="stylesheet">

  <script src="external/jquery/jquery.js"></script>

  <script src="jquery-ui.js"></script>

 </HEAD>

 <BODY>

<!-- Autocomplete -->

<h2 class="demoHeaders">Autocomplete</h2>

<div>

    <input id="autocomplete" title="type &quot;a&quot;">

</div>

 </BODY>

</HTML>

  <script>

    var availableTags = [

    "苹果",

    "ActionScript",

    "AppleScript",

    "Asp",

    "BASIC",

    "C",

    "C++",

    "Clojure",

    "COBOL",

    "ColdFusion",

    "Erlang",

    "Fortran",

    "Groovy",

    "Haskell",

    "Java",

    "JavaScript",

    "Lisp",

    "Perl",

    "PHP",

    "Python",

    "Ruby",

    "Scala"

];

$( "#autocomplete" ).autocomplete({

    source: availableTags

});

  </script>

全部源码：

http://pan.baidu.com/s/1ntwVDGX

java_前端_autocomplete_搜索框自动匹配提示的更多相关文章

  1. jQuery的搜索关键词自动匹配插件

    相信许多人都会用过搜索栏自动匹配关键词的功能,无论是像google的专业搜索引擎,还是普通的网站,现在许多都用上了这种关键词匹配技术,本文介绍的用jQuery实现的关键词匹配技术,当然要整合到自己的系 ...

  2. jQuery 下拉框输入匹配提示选项

    做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示

  3. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  4. typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

      Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...

  5. 搜索框下面显示提示数据（数据是ajax读取）

    1.前台页面 <div style="margin: 0 auto"> <input type="text" id="wenxian ...

  6. Jquery 搜索框自动提示

    为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...

  7. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  8. 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。

    示例代码: <input type="text" id="addr"/> <input type="text" hidde ...

  9. win10 搜索框输入没提示

    1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可

随机推荐

  1. Xaml于string（弦）定义常量和处理空间

    xml version="1.0" encoding="UTF-8"? > (1)基本使用方法 xaml中能够实例化各种对象,比方在ResourceDic ...

  2. 开销是有益的：AppCan 至HTML5移动创新和创业精神和健康

      2014年移动创业更趋向理性,消费级App市场接近饱和,BAT等巨头的竞争更加激烈,市场版图及格局基本定型.而企业级移动应用却迎来爆发增长,替代进入红海的消费级App市场,企业级定制APP开发成为 ...

  3. 读书时间《JavaScript高级程序设计》三：函数，闭包，作用域

    上一次看了第6章,面向对象.这里接着看第7章. 第7章:函数表达式 定义函数有两种方式:函数声明.函数表达式 //函数声明 function functionName(arg0,arg1,arg2){ ...

  4. 图片切割工具---产生多个div切割图片 采用for和一的二维阵列设置背景位置

    照片库 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb21vZ2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  5. 【Swift】学习笔记(四)——设置(Collection)

    Swift和其他语言也提供了两种类型的集合:数组和字典 数组:数组用来按顺序存储同样类型的数据,swift规定它是类型安全的,每个数组都有自己的类型也就是其它语言所说的泛型. 创建数组: 1.var ...

  6. 【转】JTree调用UpdateUI()抛空指针

    最近在做东西时发现,当在线程里面刷新JTree时,有时会出现空指针错误,在网上查了很久,终于发现以下解决方法: JTree中调用UpdateUI()报以下错误 java.lang.NullPointe ...

  7. myeclipse 8.5-10.0 安装 svn 方法(转)

    方法总结  方法一:在线安装  1.打开HELP->MyEclipse Configuration  Center.切换到SoftWare标签页.      2.点击Add Site 打开对话框 ...

  8. plsql dev中Dynamic Performance Tables not accessible分析解决(转)

    使用plsql dev的朋友多遇到过类此如下面的提示: Dynamic Performance Tables not accessible, Automatic Statistics Disabled ...

  9. android 该项目的优化toast优化技巧

    我们这样做的时候经常登录认证使用toast提示用户输入出现错误等..很多人都直接使用 Toast.makeText(LoginActivity.this, "请联系小区的物业管理" ...

  10. Java的进程内缓存框架:EhCache (转)

    EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache缓存的特点: 1. 快速. 2. 简单. 3. 多种缓存 ...