Question

所以我有这个JS对象：

public class ListData
{
    public string id { get; set; }
    [JsonProperty(PropertyName = "listname")]
    public string ListName { get; set; }
    [JsonProperty(PropertyName = "itemdata")]
    public string ItemData { get; set; }
    [JsonProperty(PropertyName = "itemdetail")]
    public string ItemDetail { get; set; }
    [JsonProperty(PropertyName = "deleted")]
    public Boolean Deleted { get; set; }
    // *** Enable Optimistic Concurrency *** //
    [Version]
    public string Version { get; set; }
}

我的问题是，我该如何搜索？我找到了一个搜索算法并尝试将其调整到我的对象，但是只有在我将属性值更改为字符时它才有效。因此，如果我将data = [ { "id": "145", "width": "12", "length": "20", "dealerPrice": "2.46", "retailPrice": "3.90" }, { "id": "146", "width": "14", "length": "22", "dealerPrice": "2.46", "retailPrice": "3.90" }, { "id": "147", "width": "19", "length": "25", "dealerPrice": "3.32", "retailPrice":"5.50" }, ... ];更改为"id": "145"，依此类推，则可行。为什么是这样？有一个更好的方法吗？任何帮助将不胜感激。

有问题的搜索算法：

"id": "foo"

完整项目：https://jsfiddle.net/8toz9xup/

Answer 1

Question的代码试图获取jQuery .indexOf()返回的数字的$.fn.data()。您可以使用HTMLElement.dataset获取DOMString属性的data-*值，.indexOf()应该与属性"foo"设置的"id"匹配

$("#search-form").submit(function(e) {
  e.preventDefault();
  var query = $("#search-form input").val();

  $(".product").hide();
  $(".product").each(function() {
    var id = this.dataset.id,
      width = this.dataset.width,
      length = this.dataset.length;

    if (id.indexOf(query) > -1 
      || width.indexOf(query) > -1 
      || length.indexOf(query) > -1) {
      $(this).show();
    }
  });
});

jsfiddle https://jsfiddle.net/8toz9xup/1/

Answer 2

您试图比较数字和字符串。我刚刚添加了＃34; .toString（）＆＃34;在您通话结束时，您需要检索＆＃34;数据＆＃34;来自HTML元素的属性，它现在正在工作。

＆＃13;

data = [{
  "id": "145",
  "width": "12",
  "length": "20",
  "dealerPrice": "2.46",
  "retailPrice": "3.90"
}, {
  "id": "146",
  "width": "14",
  "length": "22",
  "dealerPrice": "2.46",
  "retailPrice": "3.90"
}, {
  "id": "147",
  "width": "19",
  "length": "25",
  "dealerPrice": "3.32",
  "retailPrice": "5.50"
}, {
  "id": "148",
  "width": "34",
  "length": "38",
  "dealerPrice": "5.50",
  "retailPrice": "7.90"
}, {
  "id": "149",
  "width": "24",
  "length": "28",
  "dealerPrice": "5.15",
  "retailPrice": "7.59"
}, {
  "id": "150",
  "width": "22",
  "length": "34",
  "dealerPrice": "3.60",
  "retailPrice": "5.50"
}, {
  "id": "151",
  "width": "28",
  "length": "34",
  "dealerPrice": "3.58",
  "retailPrice": "5.50"
}];

var products = "";

for (var i = 0; i < data.length; i++) {
  var id = data[i].id,
    width = data[i].width,
    length = data[i].length,
    dealerPrice = data[i].dealerPrice,
    retailPrice = data[i].retailPrice;

  //create product cards
  products += "<div class='col-sm-4 product' data-id='" + id + "' data-width='" + width + "' data-length='" + length + "' data-dealerPrice='" + dealerPrice + "' data-retailPrice='" + retailPrice + "'><div class='product-inner text-center'>ID: " + id + "<br />Width: " + width + "<br />Length: " + length + "<br />Dealer Price: " + dealerPrice + "<br />Retail Price: " + retailPrice + "</div></div>";

}

$("#products").html(products);

//on search form submit
$("#search-form").submit(function(e) {
  e.preventDefault();
  var query = $("#search-form input").val();

  $(".product").hide();
  $(".product").each(function() {
    var id = $(this).data("id").toString();
    width = $(this).data("width").toString(),
      length = $(this).data("length").toString();

    if (id.indexOf(query) > -1 || width.indexOf(query) > -1 || length.indexOf(query) > -1) {
      $(this).show();
    }
  });
});

＆＃13;

body {
  padding-top: 30px;
}

.product {
  margin-bottom: 30px;
}

.product-inner {
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  padding: 10px;
}

.product img {
  margin-bottom: 10px;
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="search">
    <form id="search-form" action="" method="POST" enctype="multipart/form-data">
      <div class="form-group col-xs-9">
        <input class="form-control" type="text" placeholder="Search" />
      </div>
      <div class="form-group col-xs-3">
        <button type="submit" class="btn btn-block btn-primary">Search</button>
      </div>
    </form>
  </div>
  <div class="row" id="products">
  </div>
</div>

＆＃13;

我如何搜索这个JS对象？

2 个答案: