click-input的實現

crossea 發布于2019-08-21 16:22 / 2709人閱讀

摘要：的實現照例不知道這個功能叫什么名字好，姑且取名叫做。點擊更多按鈕后，展開所有的列表項實現思路依賴。事件驅動，對不同的功能分別進行處理。輸入內容后同步狀態的功能完成。另外為列表的高度設置為行字符內，同時。如果沒有選中，則進行正常的流程。

click-input的實現

照例不知道這個功能叫什么名字好，姑且取名叫做click-input。事實上這是公司的一個項目，我司的后臺管理面板都是后端在處理，他們在做一個關鍵詞選擇的時候，想要實現一些更豐富的效果，所以我做了這個東西。

可以在這里看demo：click-input

預覽圖：

實現的功能

打開頁面時，關鍵詞的input框中已有的內容，如果‘常用關鍵詞’中也有，就會切換到選中效果

更新關鍵詞input框中的內容時，如果手動輸入的關鍵詞符合‘常用關鍵詞’中的列表項，也會切換到選中效果；如果刪除這個關鍵詞或者其他符合的關鍵詞，‘常用關鍵詞’中的選中效果也會發生相應的改變

點擊‘常用關鍵詞’中的列表項，會將其添加到‘關鍵詞’input框中

列表項超過10個，初始狀態只顯示兩行。點擊‘更多’按鈕后，展開所有的列表項

實現思路

依賴JQurey。

事件驅動，對不同的功能分別進行處理。實現一個公共的函數renewKeywords();，用來處理input中的內容和列表中選中內容的同步。

    function renewKeywords() {
        var keyWord = document.getElementById("keyWords").value;
        var keyWords = keyWord.split(" ");
        $(".keywords li").removeClass("active");
        texts = [];
        for(var i = 0;i
這個函數會多次用到。
首先獲取input框里的內容，然后將內容保存為一個數組。先移除所有列表項的選中狀態，通過遍歷對所有的列表項進行比較，給所有選中的項目設置選中狀態。
這就是這個函數的基本功能。
1.input框
    $("#keyWords").bind("input propertychange", function() {
        renewKeywords();
    });
貌似IE和其他瀏覽器的處理不同。但使用JQurey的話，只需要綁定input事件和propertychange，每一次input中內容的改變都會觸發這個事件，然后調用renewKeywords();這個函數。
輸入內容后同步狀態的功能完成。
初始狀態同步
input中的內容在打開頁面時不總是空的，所以還需要實現一個初始狀態同步的功能，打開頁面時把input中的內容同步到列表項中的選中狀態；
    var liKeyWords = [];
    for(var i = 0;i<$(".keywords li").length;i++){
        liKeyWords.push($(".keywords li")[i].innerText);
    }//遍歷li標簽，保存innerText到數組中
    
    /*初始化已經選中的項目*/
    renewKeywords();
這里通過一個數組，遍歷列表中的內容，之后調用renewKeywords()方法，就完成了初始化選中狀態的功能；
2.‘更多’按鈕的實現
    /*‘更多’按鈕*/
    if($(".keywords li").length>10){
        $("#more_button").show();
    }//li多于10個才顯示‘更多’按鈕
    $("#more_button").on("click",function () {
        $(".keywords ul").css("height","auto");
        $("#more_button").hide();
    })//點擊后隱藏
實現思路是把按鈕先寫在html中，設置display:none;。另外為列表的高度設置為3行字符內，同時overflow:hidden。
這樣就實現了隱藏過多內容的功能。
展開列表項：判斷列表項超過10個，調用JQurey的.show()方法顯示‘更多’按鈕；點擊‘更多’按鈕后，通過設置列表的高度為auto，去除了對列表的高度限制，列表也自然是展開狀態了。
‘更多’按鈕的功能完成。
點擊列表項添加到input中的功能
    /*點擊li后，添加到input中，同時應用選中樣式*/
    $(".keywords li").on("click",function () {
        var li = $(this),
            text = this.innerText;
            texts = document.getElementById("keyWords").value.split(" ");
        for(var i = 0;i
為所有的列表項綁定點擊事件，這是基本的操作。
思路是先獲取input中已有的內容，轉換為數組，將點擊的內容push到數組中，然后將數組中的內容更新到input中。
這里還有一個點擊已選中的列表項將其設置為未選中狀態的功能需要先處理。也是通過循環，對每一項進行對比，如果是選中狀態，則從數組里移除這一項，同時設置其為未選中狀態。將新的數組內容設置為input框中的內容，然后通過return直接結束掉這一次點擊事件。
如果沒有選中，則進行正常的流程。push列表項的內容到數組中，改變選中狀態，設置input框中值。
One more thing
文章已同步在我的blog：點擊這里
整個功能的實現就是這樣了。100行代碼不到，功能很簡單，但是自己感覺還有提高的空間。比如循環用的太頻繁是不是會影響性能，應該怎樣改進？是否有更好的實現方式？
目前實習時間兩個月，還有很多需要學習的地方。比如想封裝一些基礎小功能的庫，是否用閉包會更好？
最后，感謝閱讀！

云服務器 GPU云服務器類的實現云計算的實現 webrtc的實現云存儲的實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88470.html

Dubbo SPI機制和IOC

摘要：要構建自適應實例，先要有自適應的實現類，實現類有兩種方式一種通過配置文件，一種是通過是字節碼的方式動態生成。 SPI機制 SPI，即(service provider interface)機制，有很多組件的實現，如日志、數據庫訪問等都是采用這樣的方式，一般通用組件為了提升可擴展性，基于接口編程，將操作接口形成標準規范，但是可以開放多種擴展實現，這種做法也符合開閉設計原則，使組件具有可插...

Scorpion 2019-08-15 15:48 評論0 收藏0
練習項目備選清單

摘要：練習項目備選清單文件下載器功能概要設計實現新建下載功能以為基礎給出下載鏈接可以啟動下載任務實現局域網內下載傳輸文件以單線程下載方式實現附加功能支持斷點續傳實現多線程下載實現下載參考技術套接字編程多線程編程音視頻播放器功能概要設計實現播放常見練習項目備選清單 Utilities 1. 文件下載器功能概要設計：實現新建下載功能（以ftp為基礎）給出下載鏈接可以啟動下載任務實現局...

guyan0319 2019-07-25 11:35 評論0 收藏0
練習項目備選清單

摘要：練習項目備選清單文件下載器功能概要設計實現新建下載功能以為基礎給出下載鏈接可以啟動下載任務實現局域網內下載傳輸文件以單線程下載方式實現附加功能支持斷點續傳實現多線程下載實現下載參考技術套接字編程多線程編程音視頻播放器功能概要設計實現播放常見練習項目備選清單 Utilities 1. 文件下載器功能概要設計：實現新建下載功能（以ftp為基礎）給出下載鏈接可以啟動下載任務實現局...

peixn 2019-08-14 17:41 評論0 收藏0
前端路由原理解析和實現

摘要：如何實現前端路由要實現前端路由，需要解決兩個核心如何改變卻不引起頁面刷新如何檢測變化了下面分別使用和兩種實現方式回答上面的兩個核心問題。原文鏈接：github.com/whinc/blog/… 在單頁應用如此流行的今天，曾經令人驚嘆的前端路由已經成為各大框架的基礎標配，每個框架都提供了強大的路由功能，導致路由實現變的復雜。想要搞懂路由內部實現還是有些困難的，但是如果只想了解路由實現基本...

lavor 2019-05-23 16:28 評論0 收藏0