效果图：

<!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. ASIHTTPRequest 对GET POST 请求简包

    1.ASIHTTPRequest一个简短的引论 github下载链接https://github.com/pokeb/asi-http-request 2.ASIHTTPRequest 对GET和PO ...

  2. Effective JavaScript Item 21 使用apply方法调用函数以传入可变參数列表

    本系列作为Effective JavaScript的读书笔记. 以下是一个拥有可变參数列表的方法的典型样例: average(1, 2, 3); // 2 average(1); // 1 avera ...

  3. 【剑指offer学习】求和为定值的两个数（拓展）

    接着上面一篇文章: http://blog.csdn.net/u013476464/article/details/40651451 接下来我们拓展一下题目,如果数组是乱序的,并且规定数组中的元素所有 ...

  4. UVa 353 - Pesky Palindromes

    称号:字符串统计回文子的数量. 分析:dp,暴力.因为数据是小,直接暴力可以解决. 说明:(UVa最终评出800该). #include <iostream> #include <c ...

  5. Android学习路径（七）建立Action Bar

    在action bar最今本的形式中,它只在左边展示了activity的标题以及应用的icon. 即使在这样的简单的形式中,它也不过告诉用户如今在应用的哪个activity中,同一时候为你的应用保持一 ...

  6. 一起写2048(160行python代码)

    前言: Life is short ,you need python. --Bruce Eckel 我与2048的缘,不是缘于一个玩家.而是一次,一次,重新的ACM比赛.四月份校赛初赛,第一次碰到20 ...

  7. 接口设计ie常见的问题

    问题叙述性说明: 当围绕一个简单的页面布局设计.我发现了一个奇怪的相对布局问题. 同的方式围绕布局接口.它是利用左div浮动.对div设定 margin-left这样达到的效果.实现了chrome浏览 ...

  8. Team Foundation Server 2015使用教程--读取器tfs组的checkin权限修改

  9. Linux网络编程一站式学习

    提要 学过非常多遍计算机网络,依旧不会网络编程. 看完这篇文章之后就不会是这样了. 环境:Ubuntu14.04 64bit 何为Socket 是基于TCP/IP的网络应用编程中使用的有关数据通信的概 ...

  10. 王立平--Button底，点击效果设置

    1.新....xml <? xml version="1.0" encoding="utf-8"?>        <selector xml ...