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. Java命令行解析：apache commons-cli

    http://commons.apache.org/proper/commons-cli/usage.html Apache Commons CLI用于解析命令行选项,也可以输出详细的选项说明信息. ...

  2. springmvc HandlerInterceptoer WebRequestInterceptor MethodInterceptor使用

    HandlerInterceptoer拦截的是请求地址,所以针对请求地址做一些验证.预处理等操作比较合适.

  3. 关于BeanUiles.copyPropertis()的用法

    最近的项目遇到BeanUiles.copyPropertis(),大大的简化了代码量.用hibernate从数据库中映射的实体类,与pojo对象进行转换,传统做法 Object obj = baseD ...

  4. Ruby-随机数

    --随机0-1 rand --随机一个范围 rand(1..100)

  5. [bzoj1087][scoi2005]互不侵犯king

    题目大意 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上 左下右上右下八个方向上附近的各一个格子,共8个格子. 思路 首先,搜索可以放弃,因为这是一 ...

  6. Enable Cross-Origin Requests in Asp.Net WebApi 2[Reprint]

    Browser security prevents a web page from making AJAX requests to another domain. This restriction i ...

  7. docker-freebsd-20150625

    http://www.docker.org.cn/book/docker/prepare-docker-1.html https://wiki.freebsd.org/Docker pkg insta ...

  8. 云计算CTO工作的具体内容（挺详细）

    职位描述: 工作职责: 1.参与制定公司发展战略.年度经营计划和预算方案. 2.全面管理公司研发和技术支持工作,全面负责技术层面的整体运营,包括软件研发.项目实施.销售支持及技术管理: 3.规划公司的 ...

  9. Sql Server海量数据插入

    目录 1.前言 2.BULK INSERT 3.简单示例 前言 由于昨天接到一个客户反馈导出数据卡死的问题,于是决定今天模拟一下千万级的数据,然后傻傻的等待插入数据了半天...... 对于海量数据,上 ...

  10. Base64加密算法封装

    /// <summary>/// 实现Base64加密解密/// </summary>public sealed class Base64{/// <summary> ...