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. Approaches to Vector Computation

    COMPUTER OR GANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION

  2. 加快ArcGIS Server创建缓存速度，CachingTools的实例数

    大比例尺的缓存,由于文件非常大,创建非常花费时间,在硬件设备已固定的情况下,调整Caching tools的实例数是加快创建缓存的方法之一. 简单来说:CachingTools的最大并行实例数决定了C ...

  3. 【转】Mecanim Animator使用详解

    http://blog.csdn.net/myarrow/article/details/45242403 1. 简介 Mecanim把游戏中的角色设计提高到了一个新的层次,使用Mecanim可以通过 ...

  4. 带你玩转JavaWeb开发之六-mysql基本语法详解及实例(4)

    按照分类的名称统计每个分类商品所花的总钱数[排序查询] SQL中对查询的列进行排序,使用关键字order by.默认情况下是升序的排序(从小到大的排序顺序关键字 asc).使用降序排序需要使用关键字d ...

  5. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  6. lnmp配置Yii2规则

    nginx配置: 参考地址:http://www.cnblogs.com/grimm/p/5389970.html location / { try_files $uri $uri/ /index.p ...

  7. SQL CURSOR

    SET NOCOUNT ON; DECLARE @vendor_id int, @vendor_name nvarchar(50),     @message varchar(80), @produc ...

  8. 使用openvswitch 和dnsmasq来实现虚拟机网络隔离

    openvswicth : 开源的网络虚拟化软件,可以划分vlan隔离虚拟机,做流量控制 dnsmasq:小心的dns,dhcp服务器 安装openvswicth wget  http://openv ...

  9. 4，4s屏幕过渡页处理

    //#import "sys/utsname.h" struct utsname systemInfo; uname(&systemInfo); NSString *dev ...

  10. Android出现java.net.SocketException: Permission denied报错

    是由于权限问题导致的,在manifests中找到AndroidManifest.xml 在manifest节点下新增 <uses-permission android:name="an ...