java_前端_autocomplete_搜索框自动匹配提示
效果图：
<!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 "a"">
</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_搜索框自动匹配提示的更多相关文章
- jQuery的搜索关键词自动匹配插件
相信许多人都会用过搜索栏自动匹配关键词的功能,无论是像google的专业搜索引擎,还是普通的网站,现在许多都用上了这种关键词匹配技术,本文介绍的用jQuery实现的关键词匹配技术,当然要整合到自己的系 ...
- jQuery 下拉框输入匹配提示选项
做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示
- Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
- 搜索框下面显示提示数据（数据是ajax读取）
1.前台页面 <div style="margin: 0 auto"> <input type="text" id="wenxian ...
- Jquery 搜索框自动提示
为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。
示例代码: <input type="text" id="addr"/> <input type="text" hidde ...
- win10 搜索框输入没提示
1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可
随机推荐
- 希尔排序----java实现
思路:希尔排序是分组基础上的直接插入排序,给定的一个步长数组,每个小组先直接插入排序.虽然有四次循环,但是每次循环次数少. package com.sheepmu.text; import java. ...
- 使用hadoop命令rcc生成Record 一个简单的方法来实现自己的定义writable对象
hadoop 的bin文件夹以下一个rcc命令,网上介绍非常少.看了一下源代码.发现能够用来生成 java和c++的hadoop Record 类代码,比起自己直接实现writable 接口.简单非常 ...
- PHP之运用CI用钩子实现URL权限控制————————【Badboy】
<span style="background-color: rgb(247, 252, 255); font-family: Verdana, Arial, Helvetica, s ...
- ramoops具体失败原因来解释驱动寄存器
正在使用linux的ramoops驱动器模块,当编译完成加载.查找驱动程序加载失败.显然,直接用内核代码,为什么会出现这种情况? 第一眼ramoops初始化代码: 180 static int __i ...
- Android技术——切换视图（两）随着ViewPage达到Tab幻灯片浏览
Android技术--切换视图(一)~(四)在资源项目:https://github.com/YongYuIT/MeiNv_Liulanqi 一.早期android(android.support.v ...
- iphone6 plus有什么办法
在苹果9月9号最新的秋季公布会上苹果官方公布了最新的iPhone6 plus,可能非常多朋友不知道plus是什么意思,这样命名有什么特殊的意义呢?本次Ly经典家居小编就为大家带来这方面的具体解答,一起 ...
- JTree
http://www.easyicon.net/ package swing.tree; import java.awt.BorderLayout; import java.awt.Component ...
- UVa 353 - Pesky Palindromes
称号:字符串统计回文子的数量. 分析:dp,暴力.因为数据是小,直接暴力可以解决. 说明:(UVa最终评出800该). #include <iostream> #include <c ...
- Objective-C语法简记学习
開始学习iPhone开发了,尽管如今已经有了Swift,但我还是老老实实地学习Objective-C,鄙人入门的程序语言是C,后来学习了C#和Java,如今来学Objective-C,这篇仅仅是一些非 ...
- Ignite China微软技术
首届Ignite China微软技术大会见闻 10.26-10.28,有幸参加微软在中国北京举办的首届Ignite China技术大会.世界那么大,技术那么多,我想去看看. 为期三天的技术大会在小 ...