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. windows下nodejs express安装及入门网站,视频资料，开源项目介绍

    windows下nodejs express安装及入门网站,视频资料,开源项目介绍,pm2,supervisor,npm,Pomelo,Grunt安装使用注意事项等总结 第一步:下载安装文件下载地址: ...

  2. 【翻译】std::remove - C++ Reference

    函数模板 std::remove 头文件<algorithm> template <class ForwardIterator, class T> ForwardIterato ...

  3. Node.js读取文件内容

    原文链接:http://blog.csdn.net/zk437092645/article/details/9231787 Node.js读取文件内容包括同步和异步两种方式. 1.同步读取,调用的是r ...

  4. 20145105 《Java程序设计》第7周学习总结

    20145105 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 一.认识时间与日期 (一)时间的度量 格林威治标准时间 世界时 国际原子时 世界协调时 Uni ...

  5. 20145332卢鑫 WEB安全基础实验

    20145332 WEB安全基础实验 实验过程 ·SQL字符串注入 ·Database Backdoors step1 ·Database Backdoors step2 ·Phishing with ...

  6. python数据库编程小应用

    python DB api 数据库连接对象connection数据库交互对象cursor数据库异常类exceptions 流程:开始创建connection获取cursor执行查询.执行命令.获取数据 ...

  7. Java8中数据流的使用

    Code: @Data @ToString @NoArgsConstructor @AllArgsConstructor public class Employee { private Integer ...

  8. 查找SQL 存储过程、触发器、视图!

    ALTER proc [dbo].[SP_SQL](@ObjectName sysname)  as  set nocount on ;  declare @Print nvarchar(max)-- ...

  9. 《EMCAScript6入门》读书笔记——23.Module的加载实现

  10. Elasticsearch 原理

    Elasticsearch简介 Elasticsearch是一个基于Apache lucene的实时分布式搜索.具有以下优点: 1.实时处理大规模数据.2.全文检索,能够做到结构化检索和聚合分析.3. ...