知問前端——自動補全UI

時間  2019-12-05
標籤 前端 自動 補全 简体版
原文   原文鏈接

   自動補全（autocomplete），是一個能夠減小用戶輸入完整信息的UI工具。通常在輸入郵箱、搜索關鍵字等，而後提取出相應完整字符串供用戶選擇。javascript

   調用autocomplete()方法css

var host = ['aa', 'aaaa', 'aaaaaa', 'bb'];
$("#email").autocomplete({
    source:host
});

   修改autocomplete()樣式html

   因爲autocomplete()方法是彈窗，而後鼠標懸停的樣式，咱們經過Firebug想獲取到懸停時背景的樣式，能夠直接經過jquery.ui.css裏面找相應的CSS。前端

/* 郵箱自動補全的懸停背景色 */
.ui-menu .ui-state-focus {
    background:url(img/ui_header_bg.png);
}
/* 郵箱自動補全，懸停時的字體顏色 */
.ui-menu {
    color: #666;
}

   autocomplete()方法的屬性java

   自動補全方法有兩種形式：jquery

   1.autocomplete(options)，options是以對象鍵值對的形式傳參，每一個鍵值對錶示一個選項數組

   2.autocomplete('action', param)，action是操做對話框方法的字符串，param則是options的某個選項。函數

   autocomlete外觀選項工具

屬性 默認值/類型 說明
disabled false/布爾值 設置爲true，將禁止顯示自動補全
source 無/數組 指定數據源，能夠是本地的，也能夠是遠程的
minLength 1/數值 默認爲1，觸發補全列表最少輸入字符數
delay 300/數值 默認爲300毫秒，延遲顯示設置
autoFocus false/布爾值 設置爲true時，第一個項目會自動被選定

   index.html：字體

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知問前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="header">
        <div class="header_main">
            <h1>知問</h1>
            <div class="header_search">
                <input type="text" name="search" class="search" />
            </div>
            <div class="header_button">
                <button id="search_button">查詢</button>
            </div>
            <div class="header_member">
                <a href="###" id="reg_a">註冊</a> | <a href="###" id="login_a">登陸</a>
            </div>
        </div>
    </div>
    
    <div id="reg" title="會員註冊">
        <p>
            <label for="user">帳號：</label>
            <input type="text" name="user" class="text" id="user" title="請輸入帳號，很多於2位！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="pass">密碼：</label>
            <input type="password" name="pass" class="text" id="pass" title="請輸入密碼，很多於6位！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="email">郵箱：</label>
            <input type="text" name="email" class="text" id="email" title="請輸入正確的郵箱！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label>性別：</label>
            <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
            <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
        </p>
        <p>
            <label for="date">生日：</label>
            <input type="text" name="date" readonly="readonly" class="text" id="date"></input>
        </p>
    </div>
</body>
</html>

   style.css：

body {
    margin: 40px 0 0 0;
    padding: 0;
    font-size: 12px;
    font-family: 宋體;
    background: #fff;
}
/* 更改jQuery UI主題的對話框header的背景 */
.ui-widget-header {
    background: url(img/ui_header_bg.png);
}
/* 按鈕正常狀態的背景 */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background:url(img/ui_header_bg.png);
}
/* 按鈕點擊狀態的背景 */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background:url(img/ui_white.png);
}
/* 工具提示的文本顏色 */
.ui-tooltip {
    color: #666;
}
/* 郵箱自動補全的懸停背景色 */
.ui-menu .ui-state-focus {
    background:url(img/ui_header_bg.png);
}
/* 郵箱自動補全，懸停時的字體顏色 */
.ui-menu {
    color: #666;
}
#header {
    width: 100%;
    height: 40px;
    background: url(img/header_bg.png);
    position: absolute;
    top:0;
}
#header .header_main {
    width: 800px;
    height: 40px;
    margin: 0 auto;
}
#header .header_main h1 {
    font-size: 20px;
    margin: 0;
    padding: 0;
    color: #666;
    line-height: 40px;
    float: left;
    padding: 0 10px;
}
#header .header_search {
    padding: 6px 0 0 0;
    float: left;
}
#header .header_search .search {
    width: 300px;
    height: 24px;
    border: 1px solid #ccc;
    background: #fff;
    color: #666;
    font-size: 14px;
    text-indent: 5px;
}
#header .header_button {
    padding: 5px;
    float: left;
}
#header .header_member {
    float: right;
    line-height: 40px;
    color: #555;
    font-size: 14px;
}
#header .header_member a {
    text-decoration: none;
    font-size: 14px;
    color: #555;
}
#reg {
    padding: 15px 0 0 15px;
}
#reg p {
    margin: 10px 0;
    padding: 0;
}
#reg p label {
    font-size: 14px;
    color: #666;
}
#reg .star {
    font-size: 14px;
    color: red;
}
#reg .text {
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-indent: 5px;
    font-size: 13px;
    color: #666;
}

   jQuery代碼：

var host = ['aa', 'aaaa', 'aaaaaa', 'bb'];
$("#email").autocomplete({
    source:host,
    //disabled:true,
    //minLength:2,
    minLength:0, //觸發整個補全列表
    delay:0,
    autoFocus:true
});

   autocomplete頁面位置選項

屬性 默認值/類型 說明
position 無/對象 使用對象的鍵值對賦值，有兩個屬性：my和at表示座標。my是以目標點左上角爲基準，at以目標點右下角爲基準

   jQuery代碼：

var host = ['aa', 'aaaa', 'aaaaaa', 'bb'];
$("#email").autocomplete({
    source:host,
    //感受沒什麼鳥用
    position:{
    　　my:"left center",
    　　at:"right center"
    }
});

   autocomplete()方法的事件

   除了屬性設置外，autocomplete()方法也提供了大量的事件，這些事件能夠給各類不一樣狀態時提供回調函數。

   autocomplete()事件選項

事件名 說明
create 當自動補全被建立時會調用create方法，該方法有兩個參數(event, ui)。此事件中的ui參數爲空
open 當自動補全被顯示時，會調用open方法，該方法有兩個參數(event, ui)。此事件中的ui參數爲空
close 當自動補全被關閉時，會調用close方法，該方法有兩個參數(event, ui)。此事件中的ui參數爲空
focus 當自動補全獲取焦點時，會調用focus方法，該方法有兩個參數(event, ui)。此事件中的ui有一個子屬性對象item，分別有兩個屬性：label，補全列表顯示的文本；value，將要輸入框的值。通常label和value值相同
select 當自動補全被選定時，會調用select方法，該方法有兩個參數(event, ui)。此事件中的ui有一個子屬性對象item，分別有兩個屬性：label，補全列表顯示的文本；value，將要輸入框的值。通常label和value值相同
change 當自動補全失去焦點且內容發生改變時，會調用change方法，該方法有兩個參數(event, ui)。此事件中的ui參數爲空
search 當自動補全搜索完成後，會調用search方法，該方法有兩個參數(event, ui)。此事件中的ui參數爲空
response 當自動補全搜索完成後，在菜單顯示以前，會調用response方法，該方法有兩個參數(event, ui)。此事件中的ui參數有一個子對象content，他會返回label和value值，可經過遍歷瞭解。

   jQuery代碼：

var host = ['aa', 'aaaa', 'aaaaaa', 'bb'];
$("#email").autocomplete({
    source:host,
    focus:function(e, ui) { //將鼠標慢慢移到補全列表時觸發
    　　//alert("獲取焦點！");
    　　//alert(ui.item.label);
    　　ui.item.value = 123;
    },
    select:function() {
    　　alert("選定一個項目！");
    },
    change:function() { //當自動補全失去焦點且內容發生改變時觸發
        alert("改變！");
    },
    search:function() {
    　　alert("搜索完畢！");
    },
    response:function(e,ui) {
        alert("搜索完畢！");
    　　alert(ui.content[1].label); //aaaa
    }
});

   autocomplete('action',param)方法

方法 返回值 說明
autocomplete('close') jQuery對象 關閉自動補齊
autocomplete('disable') jQuery對象 禁用自動補齊
autocomplete('enable') jQuery對象 啓用自動補齊
autocomplete('widget') jQuery對象 獲取自動補全提示的jQuery對象
autocomplete('search',value) jQuery對象 在數據源獲取匹配的字符串
autocomplete('option', param) 通常值 獲取options屬性的值
autocomplete('option', param, value) jQuery對象 設置options屬性的值

   jQuery代碼：

var host = ['aa', 'aaaa', 'aaaaaa', 'bb'];
$("#email").autocomplete({
    source:host,
    minLength:0 //觸發整個補全列表
});
$("#email").autocomplete("search",""); //匹配整個補全列表

   autocomplete中使用on()

   在autocomplete的事件中，提供了使用on()方法處理的事件方法。

   on()方法觸發的自動補全事件

事件名稱 說明
autocompleteopen 顯示時觸發
autocompleteclose 關閉時觸發
autocompletesearch 查找時觸發
autocompletefocus 得到焦點時觸發
autocompleteselect 選定時觸發
autocompletechange 改變時觸發
autocompleteresponse 搜索完畢後，顯示以前

   jQuery代碼：

$("#email").on("autocompleteopen",function() {
    alert("自動補齊，打開！");
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程