jquery UI郵箱自動補全

阿新 • • 發佈：2019-02-15

《1》

自動補全（autocomplete），是一個可以減少使用者輸入完整資訊的UI 工具。一般在輸入郵箱、搜尋關鍵字等，然後提取出相應完整字串供使用者選擇。

首先要引入jquery UI裡面的兩個包一個是 jquery-ui.js、jquery-ui.css

<html>
<head>
    <title></title>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <input id="email" type="text" />
</body>
</html>
<script type="text/javascript">
    $("#email").autocomplete({
        delay: 0, //預設為300 毫秒，延遲顯示設定。
        autoFocus:true, //設定為true 時，第一個專案會自動被選定。

        //request是一個物件，它有一個屬性term ，term表示使用者輸入的內容。

        //response的作用是用來繫結資料來源的 例如：response(["aa","aaaa","aaaaaa","bb"])

        source: function (request, response) {

            var hosts = ["qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//郵箱域名集合

            var term = request.term; //獲取使用者輸入的內容；
            var name = term;  //郵箱的使用者名稱
            var host = "";   //郵箱的域名 例如qq.com
            var ix = term.indexOf('@'); //@的位置

            var result = []; //最終呈現的郵箱列表

            

            //當用戶輸入的資料（email）裡存在@的時候，就重新給使用者名稱和域名賦值

            if (ix > -1) { //如果@符號存在，就表示使用者已經輸入使用者名稱了。
                name = term.slice(0, ix);
                host = term.slice(ix + 1);
            }

            if (name) { //如果name有值 即：不為空
                //如果使用者已經輸入@和後面的全部或部分域名，那麼就找到相關的域名提示，比如 
[email protected] 就提示[email protected]
                //如果使用者還沒有輸入@或後面的域名。那麼就把所有的域名都提示出來

                var getHosts = []; //根據使用者名稱填寫的域名我們在hosts裡面找到對應的域名集合

                if (host) { //並且host也有值的時候
                    getHosts = $.grep(hosts, function (val, key) { // 給getHosts賦值
                        if (val.indexOf(host) > -1) {
                            return val;
                        };
                    });
                }
                else {
                    getHosts = hosts;
                }
                

                var abc = $.map(getHosts, function (val) { //這個val就是getHosts裡的每個域名元素。
                    return name + "@" + val;
                });

                
                result.push(term);//假如我只定義了qq.com，和163.com這兩個郵箱列表，那麼在使用者輸入其他的郵箱的時候我也有提示的功能，比如我在輸入 
[email protected]的時候，我也有提示的功能。 這時候，我就需要將使用者輸入的資料新增到result這個郵箱域名集合當中

                result = result.concat(abc);//然後再將abc這個集合也加入到result當中 形成一個新的陣列然後賦值給result      
                
            }

            //result.push(term); //或者這樣也行，不過這樣的話用term就在數組裡面的位置就是最後一個了。提示的時候也就在最後一個了。我們一般想讓它顯示在第一個
            
            //result.unshift(term); //或者這樣也行; unshift方法的作用是：將一個或多個新元素新增到陣列開始，陣列中的元素自動後移，返回陣列新長度

            response(result);

        }
    });
</script>

下面我們可以將上面的那段程式碼小小的優化一下

<html>
<head>
    <title></title>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <input id="email" type="text" />
</body>
</html>
<script type="text/javascript">
    $("#email").autocomplete({
        delay: 0, //預設為300 毫秒，延遲顯示設定。
        autoFocus:true, //設定為true 時，第一個專案會自動被選定。
        source: function (request, response) {

            var hosts = ["qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//郵箱域名集合

            var term = request.term; //獲取使用者輸入的內容；
            var name = term;  //郵箱的使用者名稱
            var host = "";   //郵箱的域名 例如qq.com
            var ix = term.indexOf('@'); //@的位置

            var result = []; //最終呈現的郵箱列表
            

            //當用戶輸入的資料（email）裡存在@的時候，就重新給使用者名稱和域名賦值

            if (ix > -1) { //如果@符號存在，就表示使用者已經輸入使用者名稱了。
                name = term.slice(0, ix);
                host = term.slice(ix + 1);
            }

            if (name) { //如果name有值 即：不為空

                var getHosts = []; //根據使用者名稱填寫的域名我們在hosts裡面找到對應的域名集合
                
                getHosts=  host ? ($.grep(hosts, function (val) { return val.indexOf(host) > -1 })) : hosts;

                result = $.map(getHosts, function (val) { //這個val就是getHosts裡的每個域名元素。
                    return name + "@" + val;
                });                
            }          
            result.unshift(term); // unshift方法的作用是：將一個或多個新元素新增到陣列開始，陣列中的元素自動後移，返回陣列新長度

            response(result);

        }
    });
</script>

jquery UI郵箱自動補全

《1》自動補全（autocomplete），是一個可以減少使用者輸入完整資訊的UI 工具。一般在輸入郵箱、搜尋關鍵字等，然後提取出相應完整字串供使用者選擇。首先要引入jquery UI裡面的兩個包一個是 jquery-ui.js、jquery-ui.css <h

基於Jquery-ui的自動補全

1、新增CSS和JS引用 <script type="text/javascript" src="javascript/jquery-1.7.min.js"></script> <link rel="stylesheet" href="javascript/menuui/

jquery 郵箱自動補全

HTML 頁面程式碼 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> jQuery自動完成外掛</title> &l

jquery Autocomplete 實現自動補全(四)解決jquery 高版本不支援browser方法

解決jquery 高版本不支援browser方法前幾篇的例子是在 jquery 版本1.7.1 下使用的都沒問題，但最近在我們的專案中jquery版本換成了 1.9 ，執行後發現不能實現自動補全功能了。後來在網上找了很多資料，才發現 juqery

java中用jquery AutoComplete 實現自動補全(一)簡單小例子

java中用jquery AutoComplete 實現自動補全(一) 最近要做一個搜尋功能

jquery ui 自動補全demo

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <m

jquery設置輸入數字自動補全小數點效果

num 自動設置 gpo log val 自動補全輸入 ctu 案例： $(".ActualPay").blur(function () { var number = parseFloat($(this).val()).toFixed(2);

jquery 自動完成自動補全實時搜索實時查詢即時搜索即時查詢

ive 錯誤 mha 模板遇到 on() max show tro 下面代碼保存為 jQuery.autocomplete.js /* * jQuery.autocomplete.js (v1.1.2) * authored by nswish (nsw

jquery的輸入框自動補全功能+ajax

image -- spa 數據 adding box utf 分類 .com jquery的輸入框自動補全功能+ajax 2017年05月10日 18:51:39 辣姐什麽鬼閱讀數：1461 標簽： web前端更多個人分類： web前端

php+mysql+jquery 簡易的檢索自動補全提示

這段時間看了一些關於自動補全提示方面的內容，發現大部分實現過程都十分複雜。心想這應該是一個比較簡單的功能啊，於是自己親自動手來小試一下。思路很常規，需要說明的是沒有為提示內容繫結鍵盤事件，僅可用滑鼠操作。 html+jquery內容 <html> <head>

jQuery模擬自動補全

jQuery有自己的自己的自動補全功能，基本原理都是一致的。首先有一個父div用來放元件，其中包含輸入框和和子div用來模擬下拉列表。ul資料列表。 <div class="auto_div"> <input type="text" class

基於jQuery的autocomplete（自動補全）類

最近很多人在群裡求autocomplete類，那我就獻下醜，把自己寫的分享一下： /*! JQuery autocomplete * Author: Vilien * Date: 2013-7-12 * * [email protected] {uri:

Android實現登入郵箱的自動補全功能

先看下效果圖：只要輸入到@符，就會開始聯想郵箱，樣式可以自己定義。下面看下主要的程式碼： //這個就是我們繼承自MultiAutoCompleteTextView實現我們自定義的郵箱聯想元件 public class MailBoxAssociateView

jQuery Autocomplete 自動補全功能

使用Autocomplete可以很簡單的就有文字框的自動補全功能提示了。在HTML檔案中引入autocomplete的js檔案和css樣式檔案，以及autocomplete壓縮包中的jQuery的js檔案，不要私自用高版本的jQuery，可能會導致顯示不出效果。先來從網

Jquery實現自動補全功能

今天因為公司全去搞活動了，所以在網上看了一會兒jquery，在這裡詳細介紹一下基於jquery的autoComplete的實現。首先，向大家看下自己實現的最簡單的結果： ![簡單效果](https://img-blog.csdn.net/201

2種方法，當文字框輸入@自動補全郵箱字尾（特別是名稱空間的引用，共三種方法）

最近做個專案中，用到這個，貼出來大家分享一下。 <p>以下2個是單個郵箱的新增字尾</p> <div id="msg"></div> <input id='txt' value="" onpropertychange

【輸入智慧提示功能】PHP+jQuery實現自動補全功能

前面手工寫了一個下拉自動補全功能，寫的簡單，只實現了滑鼠選擇的功能，不支援鍵盤選擇。由於專案很多地方要用到這個功能，所以需要用心做一下。發現select2這個外掛的功能可以滿足當前需求。在使用jquery外掛select2的過程中遇到了一些疑惑，無論是穿json資料還

webstorm 支持vue element-ui 語法高亮屬性自動補全

bsp 自動 tag strong color 如果自動補全 html htm 如果webstorm中提示 Unknown html tag el-*** 說明沒有加載 node_modules 下的 element-ui 解決辦法就是：在webstorm 打開的

Python終端自動補全

Coding ons reads ini oba line and 啟用 clas 在～目錄下添加一個文件，名字為.pythonstartup.py #!/usr/bin/python # -*- coding: UTF-8 -*- import readline, r

Linux Vim中自動補全Python插件：Pydiction

python 自動補全 vimPydiction 可以是我們使用Tab鍵自動補全Python代碼在Vim，是一款非常不錯的插件。Pydiction不需要安裝，所有沒有任何依賴包問題，Pydiction主要包含三個文件。python_pydiction.vim -- Vim plugin that autoc

jquery UI郵箱自動補全

相關推薦