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. HTML5 -canvas拖拽、移动 绘制图片可操作移动，拖动

    关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...

  2. 安全测试工具之Burpsuite

    端口即服务,每一个服务对应一个或多个端口.端口扫描即通过一些方法检测到一台主机的一段特定端口是否提供相应的服务.利用这些扫描结果,正常用户可以访问系统所提供的服务,而黑客却可以利用这些服务中的漏洞对系 ...

  3. Google's Machine Learning Crash Course #02# Descending into ML

    INDEX How do we know if we have a good line Linear Regression Training and Loss How do we know if we ...

  4. MHA集群（gtid复制）和vip漂移

    在上一片博客中,讲述了怎么去配置MHA架构!这片博客不再细说,只说明其中MySQL主从搭建,这里使用的是gtid加上半同步复制! 步骤与上一片博客一样,不同之处在于MySQL主从的搭建!详细的gtid ...

  5. 20145122《敏捷开发与XP实践 》实验三实验报告

    实验名称 敏捷开发与XP实践 实验内容 1.团队代码要使用git在实验楼中托管,要使用结对同学中的一个同学的账号托管. 2.使用git推送代码并对结对同学的代码修改完成后再git推送. 3.掌握重构流 ...

  6. 20145208蔡野 《网络对抗》逆向及BOF基础实践

    20145208蔡野 <网络对抗>逆向及BOF基础实践 逆向及Bof基础实践 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函 ...

  7. Ruby基础教程

    一.Ruby基础知识 1.关于Ruby Ruby是脚本语言 Ruby是面向对象语言 Ruby是跨平台语言 Ruby是开放源码软件 2.Ruby入门书籍推荐 <Ruby.Programming向R ...

  8. 骗访问量的机房人物列传by xMinh

    作者:$xMinh$ 人物列传·Refun(Aufun,虚凡,人赢) 机房最人赢的人赢,上过表白墙的男人 在宿舍公然开设情感讲座和人赢培训班,教学成果显著,他的徒弟要么gay了要么凉了 认识的人极其广 ...

  9. Change the Forwarding: RMT Architecture

    Change the Forwarding: RMT Architecture Note on "Forwarding Metamorphosis: Fast Programmable Ma ...

  10. Leetcode[1]Two Sum C++

    最简单的思想,遍历, 1.两层循环,自己写的,没有用STL,时间花费较长 vector<int> twoSum(vector<int>& nums, int targe ...