jquery自動填滿輸入框

最後更新：2014-12-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style http io ar color os 使用 sp for

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自動填滿輸入框

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery自動填滿輸入框

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support