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. Qt学习之路(45): 自定义model之一

    前面我们说了Qt提供的几个预定义model.但是,面对变化万千的需求,那几个model是远远不能满足我们的需要的.另外,对于Qt这种框架来说,model的选择首先要能满足绝大多数功能的需要,这就是说, ...

  2. [分享] 采用opencv_cascadetrain进行训练的步骤及注意事项 [复制链接]

    http://f.dataguru.cn/thread-725364-1-1.html 很有用的一个帖子 转自:http://blog.csdn.net/xidianzhimeng/article/d ...

  3. 主攻ASP.NET MVC4.0之重生:Asp.Net MVC WebApi OData

    1.新建MVC项目,安装OData Install-Package Microsoft.AspNet.WebApi.OData -Version 4.0.0 2.新建WebAPI Controller ...

  4. python 线程 进程 协程 学习

    转载自大神博客:http://www.cnblogs.com/aylin/p/5601969.html 仅供学习使用···· python 线程与进程简介 进程与线程的历史 我们都知道计算机是由硬件和 ...

  5. [c/c++]指针（3）

    在指针2中提到了怎么用指针申配内存,但是,指针申配的内存不会无缘无故地 被收回.很多poj上的题都是有多组数据,每次地数组大小会不同,所以要重新申请 一块内存.但是原来的内存却不会被收回,也是说2.3 ...

  6. map set iterator not incrementable 解决办法

    例子: #include <iostream> #include <map> using namespace std; int main() { map<int, int ...

  7. python装饰器，其实就是对闭包的使用。

    装饰器 理解装饰器要先理解闭包(在闭包中引用函数,可参考上一篇通过例子来理解闭包). 在代码运行期间动态增加功能的方式,称之为“装饰器”(Decorator). 装饰器的实质就是对闭包的使用,原函数被 ...

  8. Python3基础 try-except else进行配合

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. 嵌入式C语言--面试题

    C语言测试是招聘嵌入式系统程序员过程中必须而且有效的方法.这些年,我既参加也组织了许多这种测试,在这过程中我意识到这些测试能为带面试者和被面试者提供许多有用信息,此外,撇开面试的压力不谈,这种测试也是 ...

  10. PMBOK十大知识领域是什么？

    PMBOK十大知识领域是:整合管理.范围管理.时间管理.成本管理.质量管理.人力资源管理.沟通管理.风险管理.采购管理.干系人管理. 各用一句话概括项目管理知识体系十大知识领域: 1.整合管理:其作用 ...