效果图：

<!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. spring mvc 错误摘要--。位。

    1....identifier of an instance of org.szgzw.ent.profile.baseinfo.enterprise.EnterpriseEntity was alt ...

  2. SRS微信号和QQ组

    联系方式:https://github.com/winlinvip/simple-rtmp-server/wiki/v1_CN_Contact $(function () { $('pre.prett ...

  3. 导致Asp.Net站点重启的10个原因

    原文:导致Asp.Net站点重启的10个原因 Asp.Net站点有时候会莫名其妙的重启,什么原因导致的却不得而知,经过一番折腾后,我总结了导致Asp.Net站点重启的10个原因 1. 回收应用程序池会 ...

  4. UVa 514 Rails(经典栈)

     Rails  There is a famous railway station in PopPush City. Country there is incredibly hilly. The st ...

  5. Redis实现分布式锁与任务队列

    Redis实现分布式锁 与 实现任务队列 这一次总结和分享用Redis实现分布式锁 与 实现任务队列 这两大强大的功能.先扯点个人观点,之前我看了一篇博文说博客园的文章大部分都是分享代码,博文里强调说 ...

  6. java.io.NotSerializableException

    结果发现序列不成功非静态内部类时的序列中,出现以下异常: java.io.NotSerializableException: com.tang.sharedpreferencesdemo.MainAc ...

  7. 避免内存重叠memmove（）性能

    #include <iostream> #include <string.h> using namespace std; void* memmove(void *dst, co ...

  8. ANDROID L——Material Design详细解释（UI控制）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  9. 使用Java中间MessageDigest该文本MD5加密（Java中间MD5样品加密算法演示）

    原文地址:http://www.wenboxz.com 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  10. ashx一般处理程序和HttpHandler

    asp.net项目中,使用.ashx的文件(一般处理程序)可以用于处理客户端发送来的请求,并将服务器端的处理结果返回给客户端.它能返回的类型可以是文本.或者图片.有时候,我们可以在项目中使用.cs的文 ...