Question

我有一个选择列表，当点击一个项目时，该项目被添加到div。该列表由来自PHP调用的用户组成。

我现在想要点击列表中的项目。

如何在不破坏我的代码的情况下从列表中删除项目？

这是javascript：

$(function() {
  var myUsers = new Array();
  $("#keyword").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "dist_user_search.php",
        data: {
          term: $('#keyword').val()
        },
        dataType: "json",
        success: function(data) {
          console.log('success');
          var res = [];
          for (var item of data) {
            if (item['myResult']) {
              res.push(item['myResult']);
            }
          }
          response(res);
        }
      });
    },
    minLength: 2,
    select: function(event, ui) {
      if (myUsers.indexOf(ui.item.value) < 0) {
        myUsers.push(ui.item.value);
        var str = "";
        myUsers.forEach(function(myUser) {
          str = '<li>' + myUser + '</li>' // build the list
        });
        $('#log').append('<div>' + str + '</div>'); // append the list
        $('#keyword').val('');
        return false;
      } else {
        $('#keyword').val('');
        return false;
      }
    }
  });
});

HTML：

<div class="ui-widget">
  <label for="keyword">Users: </label>
  <input id="keyword">
</div>


<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

Answer 1

每次重建列表时，都可以为点击项添加点击处理程序。

var myUsers = new Array();
$("#keyword").autocomplete({
  source: function (request, response) {
    var res = [];
    for (var i = 0; i < 3; i++) {
      res.push("Item " + i);
    }
    response(res);
  },
  minLength: 0, // Just for testing, set this to 0
  select: function (event, ui) {
    if (myUsers.indexOf(ui.item.value) < 0) {
      myUsers.push(ui.item.value);
      var str = "";
      // Notice how I changed 'str =' to 'str +='
      myUsers.forEach(function(myUser) {
        str += '<li>' + myUser + '</li>'
      });
      // Changed 'append' to 'html' to always show an up-to-date list
      $('#log').html('<div>' + str + '</div>');
      $("#log li").off("click").click(function () {
        var removed = $(this).remove().text();
        $("#removed").append(removed + ", ");
        // Added this, to clear the user from the 'myUsers' array as well.
        myUsers.splice(myUsers.indexOf(removed));
      });
    }
    $('#keyword').val('');
    return false;
  }
});

.ui-helper-hidden-accessible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="ui-widget">
  <label for="keyword">Users: </label>
  <input id="keyword">
</div>
<div style="margin-top: 100px;"><ul id="log"></ul></div>
<div id="removed">Removed: </div>

编辑：更改为代码看起来更像您的方案，我标记了评论我认为将修复无关的错误以及您第二次没有看到任何用户的原因。

Answer 2

我使用此代码并正常工作：

     //get the index of item
     var index = myArray.indexOf("itemToRemove");
     //if exists
     if (index > -1) {
       //remove
        myArray.splice(index, 1);
     }

Answer 3

最后，这就是我所做的。我需要保存项目时，为了方便起见，我会使用数组。

当我删除时，我同时从div和数组中删除。

 <script>
  $( function() {

  var myUsers = new Array();



    $( "#keyword" ).autocomplete({
   source: function( request, response ) {


        $.ajax( {
          url: "dist_user_search.php",
          data: {term : $('#keyword').val()},
          dataType: "json",
          success: function( data ) {
          console.log('success');
          var res = [];
          for (var item of data){
          if (item['myResult']){
            res.push(item['myResult']);
            }
          }

          response( res );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {


      if(myUsers.indexOf(ui.item.value) < 0){
        myUsers.push(ui.item.value);


        var str = "";
        myUsers.forEach(function(myUser){
        str = '<li>' + myUser + ' X </li>' // build the list
        });

        $('#log').append('<div>' + str + '</div>'); // append the list


         $("#log li").off("click").click(function () {
    var $this = $(this);
    $("#removed").append($this.text() + ", ");
    $this.remove();

    //remove from array..
    myUsers.splice($.inArray($this, myUsers),1);

    //debug show array.
    //alert(myUsers);

  });


       $('#keyword').val(''); return false;

       } 


      }
    } );


    //console.log(myUsers);
  } );


  </script>

Jquery或javascript - 从Array中删除项目

3 个答案: