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





  • 相关阅读:
    HDU 3951 (博弈) Coin Game
    HDU 3863 (博弈) No Gambling
    HDU 3544 (不平等博弈) Alice's Game
    POJ 3225 (线段树 区间更新) Help with Intervals
    POJ 2528 (线段树 离散化) Mayor's posters
    POJ 3468 (线段树 区间增减) A Simple Problem with Integers
    HDU 1698 (线段树 区间更新) Just a Hook
    POJ (线段树) Who Gets the Most Candies?
    POJ 2828 (线段树 单点更新) Buy Tickets
    HDU 2795 (线段树 单点更新) Billboard
  • 原文地址:https://www.cnblogs.com/kobigood/p/4160432.html
Copyright © 2011-2022 走看看