zoukankan      html  css  js  c++  java
  • jquery自动填充输入框

    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的方式
    }





  • 相关阅读:
    hbase2.x错误记录之 disable表卡住
    hbase2.x 错误记录之 procedure is still running
    yarn timelineserver v2 配置
    Linux 系统出现大量的CLOSE_WAIT
    hbase 2.x 异常记录之 hbase shell不能分配内存
    spark 访问 hive,不能获取到数据信息
    hive 由于distcp导致执行sql慢
    Hbase 安装部署
    MooseFS安装部署
    hbase2.x 单节点启动,master挂掉
  • 原文地址:https://www.cnblogs.com/kobigood/p/4160432.html
Copyright © 2011-2022 走看看