Question

我有一个我想为其创建搜索功能的任务列表。我已经设法让它一旦你开始输入，列表响应并隐藏所有不正确的结果。但是我仍然无法显示正确的结果。

代码在下面

更正正确的解决方案

HTML

<input type="text" id="search" placeholder="Player Search" />
<div id="todo">
  <div class="task">Task 1</div>
  <div class="task">Task 2</div>
  <div class="task">Task 3</div>
</div>

的Javascript

var $div = $("#todo")
var result;
$("#search").keyup(function() {
  var val = $.trim(this.value).toUpperCase();
  if (val === "")
    $(".task").show()
  else {
    $(".task").hide()
    result = $("#todo .task").filter(function() { //Updated to match child of id todo
      return -1 != $(this).text().toUpperCase().indexOf(val)
    }).show()
    console.log(result)
        $(".task").eq(result).show();
  }
})

由于我刚刚开始学习javascript，如果你能解释我的错误，以及外行人对答案/过程的逐步解释，我将不胜感激。

作为奖励，如果您还可以解释如何解决这样的javascript问题以找到潜在的问题，那将不胜感激。

Answer 1

var $div = $("#todo")
var result;
$("#search").keyup(function() {
  var val = $.trim(this.value).toUpperCase();
  if (val === "")
    $div.show()
  else {
    $(".task").hide()
    result = $("#todo .task").filter(function() { //Updated to match child of id todo
      return -1 != $(this).text().toUpperCase().indexOf(val)
    }).index()//get the index of the div that has match
    console.log(result)
        result != -1 ? $(".task").eq(result).show() : $(".task").hide()//show or hide div depending on matching index
  }
})

DEMO

始终在同一上下文中始终记住 ID应始终是唯一的。
使用class来定位多个元素。

Answer 2

function SearchContactInGroup(Strtext) {

            $('#userchat_grouping .name').each(function () {

                if ($(this).text().toLowerCase().indexOf(Strtext.toLowerCase())>= 0) {


                    $(this).closest('li').show('slow');
                }
                else {
                    $(this).closest('li').hide('slow');
                }
            });
            // $('#dvLoading').hide();
        }



    $(window).load(function () {
     $('#txtsearch').keyup(function () {
     SearchContactInGroup($(this).val());
   });});

儿童Div值的Javascript Keyup搜索

2 个答案: