autocompleter是一个简单的,容易的,可定制的自动完成功能插件,支持缓存。

1、引用脚本

<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./jquery.autocompleter.js"></script>

2、添加样式

/**
* 自动提示样式 Simplecomplete
*/
.autocompleter {
width: 100%;
background: #E1E7ED;
top: 35px;
left:;
z-index:;
border-radius: 5px;
} .autocompleter,
.autocompleter-hint {
position: absolute;
} .autocompleter-list {
box-shadow: inset 0px 0px 6px rgba(0,0,0,0.1);
list-style: none;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 9px; }
.autocompleter-list>li {
padding-left:19px;
line-height: 38px;
border-radius: 9px;
} .autocompleter-item-selected {
background: #ffffff;
} .autocompleter-item {
padding: 6px 12px;
color: #444444;
font-size: 15px;
cursor: pointer;
} .autocompleter-item:hover {
background: grey;
} .autocompleter-item strong {
background: #f9de8f;
text-shadow: 0 1px 0 #ffffff;
} .autocompleter-item span {
color: #bbbbbb;
} .autocompleter-hint {
color: #ccc;
text-align: left;
top: -56px;
font-weight:;
left:;
width: 100%;
padding: 12px 12px 12px 13px;
font-size: 24px;
display: none;
} .autocompleter-hint span {
color: transparent;
} .autocompleter-hint-show {
display: block;
} .autocompleter-closed {
display: none;
}

也可以引用 jquery.autocompleter.css ,作相应处理;

3、定义你的autocompleter:

$(function () {
$('input').autocompleter({ source: 'path/to/get_data_request' });
});

或用于本地JSON来源:

var data = [
{ "value": "1", "label": "one" },
{ "value": "2", "label": "two" },
{ "value": "3", "label": "three" }
];
$(function () {
$('input').autocompleter({ source: data });
});

4、完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冷暖自知一抹茶ck</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/global.css"> <script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./jquery.autocompleter.js"></script>
</head>
<body>
<div class="nav">
123456789
</div>
<div class="search">
<div class="search_text" style="">
<input id="searchtxt" class="bantxt" name="searchtxt" placeholder="搜索关键字.." style="border: 1px solid rgb(44, 44, 44);" maxlength="60" type="text" />
<button id="seobut" class="btn banbutt" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<script>
$(function () {
$('#searchtxt').autocompleter({
highlightMatches: true, // marker for autocomplete matches
source: "server.php", // object to local or url to remote search template: '{{ label }} <span>({{ id }})</span>', // custom template
//template: '<span id="{{ id }}">{{ label }}</span>', empty: false, // abort source if empty field[如果数据为空,阻止检索]
limit: 10, // max results[最多查询显示条数]
cache: true,
callback: function (value, index, selected) {
if (selected) {
//$('.icon').css('background-color', selected.hex);
$('#searchtxt').attr("data-value",selected.id);
}
}
}); $("#seobut").click(function() {
var seo = $("#searchtxt").val();
if (seo.length > 1) {
window.location.href = "search?seo=" + seo;
}
});
$('#searchtxt').bind('keypress',
function(event) { if (event.keyCode == "13") {
var seo = $("#searchtxt").val();
if (seo.length > 1) {
window.location.href = "search?seo=" + seo;
}
}
}); });
</script>
<div class="container" style="width:100%;height:auto;">
<div style="width:1050px;height:auto;margin:0 auto;">
<div style="width:60%;height:900px;background:yellow;float:left;margin:2%;padding:2% 1%;">
<div style="">123456</div>
<div style="">789456</div>
</div>
<div style="width:26%;height:900px;background:pink;float:right;margin-left:6%;margin:2%;padding:2% 1%">
<div style="">123456</div>
<div style="">789456</div>
</div>
<div style="clear:both;"></div>
</div>
</div> <div style="width:100%;text-align:center;">
<p>冷暖自知一抹茶ck</p>
</div>
</body>
</html>

参考资料:https://github.com/ArtemFitiskin/jquery-autocompleter

打包文件:链接:http://pan.baidu.com/s/1o8Ivgtc 密码:ivc7

php + jQuery自动完成插件autocompleter的更多相关文章

  1. jQuery自动完成插件flexselect

    项目中使用flexselect自动完成插件时遇到一个问题 刚开始以为是js的引用顺序有问题,但是查看后发现不是js引用顺序问题 js引用顺序如下 最后查找资料也没有解决问题,一直提示这个错误 后来在f ...

  2. jquery自动完成插件的使用

    .ui-autocomplete { z-index: !important; max-height: 100px; overflow-y: auto; /* 防止水平滚动条 */ overflow- ...

  3. 30+最佳Ajax jQuery的自动完成插件的例子

    在这篇文章中,我们将介绍35个jQuery AJAX的自动完成提示例子. jQuery 的自动完成功能,使用户快速找到并选择一定的价值.每个人都想要快速和即时搜索输入栏位,因为这个原因,许 流行的搜索 ...

  4. jQuery 自动完成文本框

    jQuery自动完成插件开源软件 http://www.oschina.net/project/tag/329/jquery-autocomplete jQuery TextExt http://te ...

  5. jQuery图片自动添加水印插件

    JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...

  6. 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了

    在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...

  7. jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  8. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  9. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

随机推荐

  1. 关于iis8.5中发布的网站无法连接数据库的解决方案。

    发布的网站在浏览时出现如下提示: “/”应用程序中的服务器错误. 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL ...

  2. Xamarin.Android 应用程序配置

    * 在 Xamarin 中 Android 清单文件的内容一般不通过手动编辑,而是由编译器根据 项目属性设置 和 一系列 特性类 自动生成 1. 应用程序在android启动器中显示的名称设置: 主活 ...

  3. 执行命令行, 并获取输出字符(比如OSQL)

    直接贴代码了, 没什么好说的, 很简单, 也不需要注释 function DoCMD(ACommand: AnsiString; var ACmdResult: string): Boolean; v ...

  4. 浅谈iOS开发中方法延迟执行的几种方式

    Method1. performSelector方法 Method2. NSTimer定时器 Method3. NSThread线程的sleep Method4. GCD 公用延迟执行方法 - (vo ...

  5. JavaScript数据类型 typeof, null, 和 undefined

    JavaScript 数据类型 在 JavaScript 中有 5 种不同的数据类型: string number boolean object function 3 种对象类型: Object Da ...

  6. 学习Python的ABC模块(转)

    http://yansu.org/2013/06/09/learn-Python-abc-module.html 1.abc模块作用 Python本身不提供抽象类和接口机制,要想实现抽象类,可以借助a ...

  7. centos7 添加svn

    预期目的: 1.仓库放在 /var/svn/ 目录下,并且仓库名为 project 2.创建用户组lsgogroup,该组下添加两个成员lsgoweb1.lsgoweb2,密码直接用用户名,两用户可以 ...

  8. alert样式修改

    HTML: <div id="div">1223325</div> CSS: .btn_alert button{font-size: 1em;border ...

  9. 现在web前端这么火,钱景怎么样啊?

    web前端开发工程师可以说是一个全新的职业,在IT整个行业中真正受到重视的时间没有超过5年,也正因为这样,大家越来越想了解web前端工程师的前景究竟怎么样? web前端培训就业前景如何?web前端工程 ...

  10. Java反射使用技巧

    1. 通过setAccessible关闭安全检查,关闭的目的不是因为访问的field/method是私有的,而且因为关闭后访问公有方法也不会再有安全检查. SomeObject someObject ...