click-input的实现

crossea 发布于2019-08-21 16:22 / 2545人阅读

摘要：的实现照例不知道这个功能叫什么名字好，姑且取名叫做。点击更多按钮后，展开所有的列表项实现思路依赖。事件驱动，对不同的功能分别进行处理。输入内容后同步状态的功能完成。另外为列表的高度设置为行字符内，同时。如果没有选中，则进行正常的流程。

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行代码不到，功能很简单，但是自己感觉还有提高的空间。比如循环用的太频繁是不是会影响性能，应该怎样改进？是否有更好的实现方式？
目前实习时间两个月，还有很多需要学习的地方。比如想封装一些基础小功能的库，是否用闭包会更好？
最后，感谢阅读！

服务器托管海外云主机类的实现云计算的实现 webrtc的实现云存储的实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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