1，这是一个比较简单的页面，你可以复制下来就可以使用。
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script>
        $(function() {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $( "#tags" ).autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="tags">标签：</label>
    <input id="tags">
</div>

</body>
</html>

2.实战自动填充数据：
(1)页面：
$("#account_name").focus(function(){
    var sel = $('#select').val();
    var auto_able = !$(this).data('autocomplete');
    if(auto_able)
    {
        $(this).autocomplete(
                {
                    autoFocus: true,//自动获得焦点
                    minLength: 0,
                    autoFill: true,  //要不要在用户选择时自动将用户当前鼠标所在的值填入到input框，Default: false
                    source: '__URL__/autoCompleteAccount',  //这是路径，也是数据源。
                    select: function (event, ui) {
                        $("#account_name").val(ui.item.label);
                        window.location.href = "__URL__/order?sel="+sel+"&account_id="+ui.item.id;
                        return false;
                    }
                }
        );
    }
});

输入框：
<input type="text" placeholder="请输入帐号名称" id="account_name" name="account_name" autocomplete="off" value="{$accountName}">

(2).控制器：
public function autoCompleteAccount(){
    $flag_arr = array();
    if($_GET['term']){
        foreach( $this->_account as $key=>$ac){
            if ( stripos( $ac , trim($_GET['term']) ) !== false )
                $flag_arr[] = array(
                    'id' => $key,
                    'label' => $ac,
                );
        }
    }
    echo json_encode($flag_arr);exit; //以json的方式
}

jquery自动填充输入框的更多相关文章

  1. 自动填充输入框 Asp .Net Mvc

    1 效果 当在一个文本框中输入时,可以自动查找相关选项,然后加载出来以供参考   2 前台代码   <link href="~/Content/themes/base/jquery-u ...

  2. JQuery自动填充控件：autocomplete（自己稍作了修改）

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 消除浏览器对input输入框的自动填充

    Mozilla官方文档建议的是 直接使用 autocomplete = ‘off’ 即可禁止输入框从浏览器cache获取数据,博主以前使用这个也就足够兼容浏览器了. 现在发现,却在chrome.fir ...

  4. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  5. jQuery 实现带下拉提示且自动填充的邮箱

    /* ** 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js ** Author:博客园小dee*/ 本文用 jQuery 实现一个用户输入字符时出现能够提示邮箱后缀名的下拉 ...

  6. Chrome浏览器下自动填充的输入框背景

    记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...

  7. web杂记-禁止输入框自动填充文字

    1:背景 公司基于业务需求开发了一套纯JS的时间控件,本来用得好好得.后来发现在部分浏览器下使用该时间控件会出现输入框自动填充的部分与控件的展示产生了冲突: 如图: 2:问题分析 因为部分浏览太人性化 ...

  8. input输入框自动填充黄色背景解决方案

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...

  9. 解决谷歌浏览器给输入框input自动填充密码问题

    这时候我们可能会在 input上 加上 autocompleted="off" 这个属性来阻止input被自动填充. <input type="text" ...

随机推荐

  1. Linux中Postfix邮件发送配置（三）

    部署DNS服务器 postfix根据域名和地址做一个MX记录,A记录,PTR记录(一般在互联网上邮件服务器都要反解,没有PTR记录会认为是垃圾邮件) $ service iptables stop $ ...

  2. c++编程规范的纲要和记录 (转)

    这是一本好书, 可以让你认清自己对C++的掌握程度. 看完之后,给自己打分,我对C++了解多少? 答案是不足20分. 对于我自己是理所当然的问题, 就不提了, 记一些有启发的条目和细节: (*号表示不 ...

  3. bzoj1644 / P1649 [USACO07OCT]障碍路线Obstacle Course

    P1649 [USACO07OCT]障碍路线Obstacle Course bfs 直接上个bfs 注意luogu的题目和bzoj有不同(bzoj保证有解,还有输入格式不同). #include< ...

  4. JavaScript 中语法规范及调试

    JavaScript 中语法规范及调试 版权声明:未经博主授权,内容严禁分享转载 JavaScript 开发环境 JavaScript 脚本可以使用任意一款纯文本编辑器进行编程开发. 常见的前端开发编 ...

  5. 02: tornado进阶篇

    目录:Tornado其他篇 01: tornado基础篇 02: tornado进阶篇 03: 自定义异步非阻塞tornado框架 04: 打开tornado源码剖析处理过程 目录: 1.1 自定制t ...

  6. ELK之elasticsearch6.5集群

    前面介绍并初试了es6.5系列的单节点的操作,现在搭建es6.5系列的集群: 环境:三节点:master-172.16.23.128.node1-172.16.23.129.node2-172.16. ...

  7. 20165310_获奖感想与Java阶段性学习总结

    获奖感想与Java阶段性学习总结 一.Learning By Doing ​ 在此之前,其实我并没有想到能够成为小黄杉的第一批成员之一,喜悦之余,也感受到了许多的压力.小黄杉一方面代表了老师对于我这一 ...

  8. 某模拟题（USACO部分题+noip2005部分题）

    题目描述 农场上有N(1 <= N <= 50,000)堆草,放在不同的地点上.FJ有一辆拖拉机,也在农场上.拖拉机和草堆都表示为二维平面上的整数坐标,坐标值在1..1000的范围内.拖拉 ...

  9. Win10 Edge浏览器怎么重装 Win10重装Edge浏览器

    具体如下: 重新安装Microsoft Edge 1.按Windows键+ R,打开 输入以下代码,可以直接复制黏贴. %LocalAppData%\Packages\Microsoft.Micros ...

  10. Go第一篇之轻松入门

    Go语言简介 Go语言简史 Go 语言(或 Golang)是 Google 在 2007 年开发的一种开源编程语言,于 2009 年 11 月 10 日向全球公布.Go 是非常年轻的一门语言,它的主要 ...