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基础命令---chown

    chown 改变文件或者目录的所有者,或者所属的群组.如果只给出一个所有者(用户名或数字用户ID),则该用户将成为每个给定文件的所有者,并且文件的组不会被更改.如果所有者后面跟着冒号和组名(或数字组I ...

  2. python基础七--集合

    12.221.昨日内容回顾 小数据池: int:-5--256 str:1.不能有特殊字符 2.*int不能超过20 编码:所能看到的最小构成单位叫字符 ascii : 8位 1字节 表示1个字符 u ...

  3. JSP输出HTML时产生的大量空格和换行的去除方法

    在WEB应用中,如果使用jsp作为view层的显示模板,都会被空格/空换行问题所困扰.     这个问题当年也困扰了我比较长的时间.因为在jsp内使用的EL标签和其他标签时,会产生大量的空格和换行符. ...

  4. Low-level Native Plugin Interface

    http://docs.manew.com/Manual/index.htm https://docs.unity3d.com/Manual/NativePluginInterface.html ht ...

  5. linux虚拟机中安装vm_tool的方法及用处

    解决问题:实现虚拟机VMware上linux与windows互相自由复制与粘贴.如在同一个系统下ctrl+c 与ctrl+v一样方便.解决了只能通过U盘摆渡复制的繁琐问题. 系统环境: 虚拟机VMwa ...

  6. linux内核启动参数解析及添加

    1.环境: ubuntu16.04 Linux jello 4.4.0-89-generic #112-Ubuntu SMP Mon Jul 31 19:38:41 UTC 2017 x86_64 x ...

  7. C#中的编译开关

    c#不支持宏定义,只支持编译开关. ======================================我想加上#define xxx就编译a代码,否则编译b代码,像这样的:#if xxxa ...

  8. 第八章 对称加密算法--AES

    注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第7章“初等加密算法--对称加密算法” 8.1.AES 特点: 密钥建立时间短.灵敏性好.内存需求低(不管怎样,反正就是好) ...

  9. Educational Codeforces Round 27 A B C

    A. Chess Tourney   Berland annual chess tournament is coming! Organizers have gathered 2·n chess pla ...

  10. AtCoder 杂题训练

    前言: 因为要普及了,今年没一等就可以退役去学文化课了,所以暑假把历年noip普及组都刷了一遍,离noip还有50+天,想弄点强化训练什么的. 想了想,就这些天学文化课之余有空就把AtCoder之前那 ...