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. Visual Studio命令行工具

    devenv.exe Visual Studio IDE 主程序,位于VS_INSTALL_DIR/Common7/IDE. 本节内容来源:vs2010环境执行devenv /? 启动VS deven ...

  2. 如何计算合适的InnoDB的(innodb_log_file_size)日志文件大小

    在mysql工具中如phpmyadmin中执行show engine innodb status;注意观察Log sequence number 60秒后再次执行 获取Log sequence num ...

  3. eclipse导入项目后，java文件无法编辑的问题

    新公司第一天,从svn checkout maven项目后,导入eclipse,发现文件的图标不对,如下图箭头所示,出现这个问题的原因, 是项目的的目录下没有.classpath文件,所以需要执行下m ...

  4. C#发送邮件时提示：“不允许使用邮箱名称。服务器响应为：”的错误解决办法

    由于项目需要,要为客户提供一个定期发送邮件的程序.本来原来自己还写过,但新写的程序一晚上也没通过测试,总是提示"不允许使用邮箱名称.服务器响应为..." 经过在网上搜索查找解决办法 ...

  5. 6.Linux的文件权限与目录配置

    Linux文件属性:(- rwx r-x r-- 1 root root 2800 feb 1 11:55 test.txt 顺序按着空格排序,除了时间) 第一组字符代表这个文件是目录.文件或链接文件 ...

  6. 6. support vector machine

    1. 了解SVM 1. Logistic regression 与SVM超平面 给定一些数据点,它们分别属于两个不同的类,现在要找到一个线性分类器把这些数据分成两类.如果用x表示数据点,用y表示类别( ...

  7. 用linq批量更新数据集

    对于数据集需要更新所有对象的FTaxRate 赋值为ftax_rate 以下采用遍历方式更新: foreach (var entry in _dataEntityList){ entry.FTaxRa ...

  8. PPT图片双屏抽奖系统现场主要操作流程介绍

    目录 第一步:前期准备工作 第二步:现场预备与辅助展示工作 第三步:现场正式抽取工作 PPT图片双屏抽奖系统-现场抽奖视频实录 第一步:前期准备工作 把第二个步骤优化处理制作好的PPT文件 [图片.p ...

  9. ARM 开发工具 Keil和DS-5的比较。

    http://www.eeboard.com/bbs/thread-25219-1-1.html 如今ARM体系架构的处理器在嵌入式市场上呼风唤雨,从低端的MCU应用到高端的多媒体消费电子,移动设备领 ...

  10. 【详解】ERP、APS与MES系统是什么？

    ERP是什么?MES是什么?APS又是什么?无论他们有什么功能,对企业有什么意义,不过都是计算机在读写一些数据而已.实际上这一切的本质不过是数据在硬盘和内存中快速的读和写. ERP是--,APS是-- ...