效果图：

<!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. Codeforces Round #270(利用prim算法)

    D. Design Tutorial: Inverse the Problem time limit per test 2 seconds memory limit per test 256 mega ...

  2. jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马

    资源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  3. ubuntu 下搭建apache+python的运行环境

    ubuntu下怎么搭建apache+python运行环境,可以参考http://www.01happy.com/ubuntu-apache-mod-python/ ,这里只是简单的记录下步骤,本文主要 ...

  4. zoj 3820 Building Fire Stations(树上乱搞)

    做同步赛的时候想偏了,状态总是时好时坏.这状态去区域赛果断得GG了. 题目大意:给一棵树.让求出树上两个点,使得别的点到两个点较近的点的距离最大值最小. 赛后用O(n)的算法搞了搞,事实上这道题不算难 ...

  5. matlab学习------------普通dialog对话框，错误对话框errordlg，警告对话框warndlg

    Dialog对话框 语法: h = dialog('PropertyName',PropertyValue,...) 对话框的默认属性 WindowStyle的值:   {normal} | moda ...

  6. WPF学习（2）XAML

    XAML(eXtensible Application Markup Language,可扩展应用程序标记语言)是一种声明式的编程语言,遵循XML的语法.WPF使用XAML来设计UI具有易用性.高效性 ...

  7. Scala刮：使用Intellij IDEA写hello world

    介绍 在前面的文章中,,我们介绍了如何使用Scala IDE那是,eclipse集成Scala开发插件Scala开发语言程序.使用一段时间后,.发现eclipse正确Scala支持不是很好.用户体验差 ...

  8. 你的Java代码对JIT编译友好么？（转）

    JIT编译器是Java虚拟机(以下简称JVM)中效率最高并且最重要的组成部分之一.但是很多的程序并没有充分利用JIT的高性能优化能力,很多开发者甚至也并不清楚他们的程序有效利用JIT的程度. 在本文中 ...

  9. 使用nodeitk进行对象识别

    前言 东莞,晴,29至27度.忙了一天,最终能够写写东西了.今天继续昨天的话题,我们在昨天的例了基础上完好,通过匹配关键点求出映射从而找到场景中的已知对象. 目标 本文你将学习 採用nodeitk的f ...

  10. SharePoint 如何使自己的网页自动跳转

    SharePoint 如何使自己的网页自动跳转         SharePoint自动制作自己的网页跳的很easy,只有在页面上要添加一个Web部分--内容编辑器,对应的js代码就可以.       ...