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. 使用flex布局通过order控制显示顺序

    整个棋盘是用一个个"+"组成的,共15行15列,所以可以使用一个15X15的二维数组表示,用户下棋的位置用行列位置表示,这样用户下棋的位置所对应的数组元素将由"+&quo ...

  2. 设置一个顺手的Xcode

    授权转载,作者:吴白(微博) 手指在键盘上飞速跳跃,终端上的代码也随着飞舞,是的这确实很酷.优秀的程序员总是这么一群人,他们不拘于现状,不固步自封,他们喜欢新奇的事,他们把自己发挥到极致. 指法攻略 ...

  3. JQuery中的DOM操作

    JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...

  4. SEO实战宝典阅读笔记

    1. 对搜索引擎更友好 1.1 sitemap sitemap自动生成 https://www.xml-sitemaps.com 谷歌 sitemap.xml 百度 sitemap.html 1.2 ...

  5. 关于python，一些整理

    参数传递 1 a = 1 2 def fun(a): 3 a = 2 4 fun(a) 5 print a 6 7 # 输出: 1 a = [] def fun(a): a.append(1) fun ...

  6. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  7. win10本地搭建apache+php+mysql运行环境

    首先下载所需软件: Vc2015:https://www.microsoft.com/zh-CN/download/details.aspx?id=48145 Vc2012:http://www.mi ...

  8. ASP.Net中的Web Resource

    http://support.microsoft.com/kb/910442,这是中文的,机器翻译的,不太容易看懂,英文的是:http://support.microsoft.com/kb/91044 ...

  9. Centos7下配置node.js环境

    1.软件环境: Centos7.VMware 10.0.NodeJS v0.10.24 2.安装过程 1>安装过程中需要管理员权限,及root权限,可以敲入如下命令. [sharing@loca ...

  10. REmap首次尝试--PC端

    在REchart项目中,实验此网址的内容,得到若干实例 针对此我针对北京市做了若干实验 第一:绘制北京市的填充地图 代码如下: >BJqu<-mapNames("beijing& ...