个人中心
gpt4 book ai didi

jquery - Kendo UI [DropDownList] - 过滤搜索，如果未找到搜索项则显示消息

转载 作者：行者123 更新时间：2023-12-01 03:35:46 24 4
gpt4 key购买 nike

我正在使用带有搜索过滤器的 Kendo UI DropDownList...

如果下拉列表中没有搜索到的项目，如何将搜索图标替换为“+ 添加”链接和“无可用项目”消息...

Online Demo

请参阅下图以获取更多说明... enter image description here

jQuery

$(document).ready(function() {

    $("#products").kendoDropDownList({
        filter: "contains",
    });

    if ($('.k-list-scroller ul').length == 0){
        $('.k-list-filter .k-i-search').hide();
        $('.k-list-filter').append('<a href="#" id="newItem">+ Add</a>');
    }

    if ($('.k-list-scroller ul').length > 0){
        $('.k-list-filter .k-i-search').show();
        $('.k-list-filter #newItem').remove();
    }

});

HTML

<h4>Products</h4>
<select id="products">
    <option>Lorem</option>
    <option>Ipsum</option>
    <option>Dolar</option>
    <option>Sit amet lieu</option>
</select>

最佳答案

您仅在页面加载时运行代码($(document).ready())。您需要添加一个事件处理程序，以便在每次文本框更新时使用您的代码。我可以为此添加一个 keyup 事件。

但是，添加后，代码会在 kendo 知道下拉列表中的值已更改之前运行。使用 delay ，我们可以稍等一下，让下拉菜单正确更新。

注意:我使用了 500 毫秒作为延迟，但该数字不是数字。

$(document).ready(function() {
  // set up the delay function
  var delay = (function(){
    var timer = 0;
    return function(callback, ms) {
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();
    
  $("#products").kendoDropDownList({
    filter: "contains"
  });

  // set up the event handler
  $(".k-list-filter input").keyup(function () {
    
    // wait for Kendo to catch up
    delay(function () {
      // check the number of items in the list and make sure we don't already have an add link
      if ($('.k-list-scroller ul > li').length === 0 && !($("#newItem").length)) {
        $('.k-list-filter .k-i-search').hide();
        $('.k-list-filter').append('<a href="#" id="newItem">+ Add</a>');
      }

      // check the number of items in the list
      if ($('.k-list-scroller ul > li').length > 0) {
        $('.k-list-filter .k-i-search').show();
        $('.k-list-filter #newItem').remove();
      }
        
    }, 500); // 500 ms delay before running code
  });    
});
html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>

  <h4>Products</h4>
  <select id="products">
    <option>Lorem</option>
    <option>Ipsum</option>
    <option>Dolar</option>
    <option>Sit amet lieu</option>
  </select>
      
</body>
</html>

关于jquery - Kendo UI [DropDownList] - 过滤搜索，如果未找到搜索项则显示消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35496832/

24 4 0
文章推荐： javascript - 在 jquery 循环中为选项设置文本时出错
文章推荐： asp.net - 编写我自己的自定义 OAuth 外部登录提供程序
文章推荐： javascript - 如何在fabric js中绘制扇形(不是圆弧)？
文章推荐： javascript - 不要带着 promise 来工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com