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





  • 相关阅读:
    WAF攻防实战
    简单的Web日志分析脚本
    android multicast 多播(组播)问题
    easyhadoop:failed to open stream:Permission denied in /var/www/html/index.php
    Codeforces Round #215 (Div. 2) A. Sereja and Coat Rack
    删除workspace下的vss的scc文件
    由两代WIN8 Surface平板看微软心态
    C++ 需要返回值的函数却没有返回值的情况 单例模式
    调整系统的inode数量
    平衡树
  • 原文地址:https://www.cnblogs.com/kobigood/p/4160432.html
Copyright © 2020-2023  润新知