Javascript 如何使用两个术语对集合进行搜索？

因此，目前我有一个项目集合，我希望用户能够使用该集合中的名称和一些随机文本进行搜索

以下是我迄今为止所做的工作：

    public IEnumerable<Item> items = new[]
    {
        new Item { ItemId = 1, ItemName = "Apple", ItemDescription = "crispy, sweet", ItemPairing = "Walnut"},
        new Item { ItemId = 2, ItemName = "Pear", ItemDescription = "slightly tart", ItemPairing = "Cheese"},
        new Item { ItemId = 3, ItemName = "Banana", ItemDescription = "good source of potassium", ItemPairing = "Honey" },
        new Item { ItemId = 4, ItemName = "Chocolate", ItemDescription = "Sweet and rich melting flavor", ItemPairing = "Wine"}
    };


    public ActionResult Index()
    {
        return View("Index");
    }

    public ActionResult Search(string search)
    {
        return View("Index", items.Where(n => n.ItemName.StartsWith(search))); 
    }

public IEnumerable items=new[]
{
新项目{ItemId=1，ItemName=“Apple”，itemsdescription=“crispy，sweet”，ItemPairing=“Walnut”}，
新项目{ItemId=2，ItemName=“Pear”，itemsdescription=“稍微酸一点”，ItemPairing=“Cheese”}，
新项目{ItemId=3，ItemName=“香蕉”，itemsdescription=“钾的良好来源”，ItemPairing=“蜂蜜”}，
新项目{ItemId=4，ItemName=“巧克力”，itemsdescription=“甜美而浓郁的融化风味”，ItemPairing=“葡萄酒”}
};
公共行动结果索引（）
{
返回视图（“索引”）；
}
公共操作结果搜索（字符串搜索）
{
返回视图（“索引”，items.Where（n=>n.ItemName.StartsWith（search））；
}

以下是视图上的搜索部分：

<p>
    <b>Search for Name:</b> 
    @Html.TextBox("ItemName", "", new { @class = "form-control" })  
    <b>Search for Text:</b>
    @Html.TextBox("ItemText", "", new { @class = "form-control" })

    <input id="search" type="submit" value="Search" onclick="search(ItemName,ItemText)" />
</p>

<script>
    function search(ItemName, ItemText) {
        $("search").click(function () {

            $.ajax({
                type: "POST",
                url: "/Items/Search",
                data: {ItemName, ItemText},
                datatype: "html",
                success: function (data) {
                    $('#result').html(data);
                }
            });
        });
    }
</script>

搜索名称：
@TextBox（“ItemName”，new{@class=“formcontrol”}）
搜索文本：
@TextBox（“ItemText”，new{@class=“form control”}）

函数搜索（ItemName、ItemText）{
$（“搜索”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“/Items/Search”，
数据：{ItemName，ItemText}，
数据类型：“html”，
成功：功能（数据）{
$（'#result'）.html（数据）；
}
});
});
}

所以它可以看起来像这样：

我希望这样，当用户在Apple中键入Name和Crispy作为文本时，他们可以从我的收藏中找到Apple项目。我还希望这样，如果他们键入名称或文本，它仍然会返回一个匹配的项目

---

我不知道该怎么做

> P>您可能想考虑将两个字符串转换为上或下，这取决于您的搜索需求。下面的代码假定搜索不区分大小写

public ActionResult Search(string search)
{
    string upperSearch = search.ToUpperInvariant();
    return View("Index", items.Where(n => 
        n.ItemName.ToUpperInvariant().StartsWith(search) || 
        n.ItemDescription.ToUpperInvariant().Contains(search))); 
}

---

如果文本或名称匹配，则与或条件匹配。如果他们匹配不同的项目（比如苹果和TART），你可能需要考虑在这个用例中会发生什么，但是在这种情况下它将返回苹果和Paple。

< P> CStrouble的回答会起作用，如果你进入Ajax调用并想在一个页面中排序，你可以考虑使用Ajax和jQuery调用。 使用AJAX和JQuery：

var search = function(itemName, itemText) {
    //note that if you want RESTful link, you'll have to edit the Routing config file.
    $ajax.get('/controller/action/itemName/itemText/', function(res) {
        //do stuff with results... for instance:
        res.forEach(function(element) {
            $('#someElement').append(element);
        });
    });
};

以及行动：

public JsonResult SearchAction(itemName, itemText) {
    List<Item> newItems = items.Where(x => x.ItemName.ToUpperInveriant().Contains(itemName.ToUpperInveriant()) 
                                        || x.ItemDescription.ToUpperInveriant().Contains(itemText.ToUpperInveriant())
                                        || x.ItemPairing.ToUpperInveriant().Contains(itemText.ToUpperInveriant()));
    return Json.Encode(newItems.ToArray());
}

现在，当您收到jquery响应时：

        $.ajax({
            type: "POST",
            url: "/Items/Search",
            data: {ItemName, ItemText},
            datatype: "html",
            success: function (data) {
                $('#result').html(data);
            }
        });
   //since data is the HTML partial itself.
   //if you have firebug for Mozilla firefox, you can see what I'm
   //talking about

---

从提交按钮中删除

onclick

属性，并将其更改为

<button type="button" id="search">Search</button>

注意，您可能想考虑使它<代码> $.GET（）/<代码>而不是<代码> $ .PASS（）/代码>

并更改控制器方法以接受来自两个文本框的输入

public PartialViewResult Search(string itemName, string itemText)
{
  var items = ??
  // filter the data (adjust to suit your needs)
  if (itemName != null)
  {
    items = items.Where(x => x.ItemName.ToUpperInveriant().Contains(itemName.ToUpperInveriant()) 
  }
  if (itemText != null)
  {
    items = items.Where(x => x.ItemDescription.ToUpperInveriant().Contains(itemText.ToUpperInveriant()) 
  }
  // query you data
    return PartialView("_Search", items); 
}

旁注：不清楚搜索的逻辑是什么-即，如果在两个文本框中都输入搜索文本，您想要

和

还是

或

搜索

假设问题视图中的视图是

Index.cshtml

，那么它将包括以下html

<div id="result">
  @Html.Action("Search") // assumes you want to initially display all items
</div>

---

如果您的

onclick（）

函数？您的

Search（）

方法还需要两个参数，一个用于

ItemName

，另一个用于

ItemText

（匹配两个文本框的名称）啊，对了，我想知道是作为一个字符串还是两个字符串传递它更好？如果只传递了一个字符串，您如何知道在哪个属性中搜索：）好的一点，我现在传入两个参数，我应该如何处理搜索？当前的

onclick

函数是什么？你在打ajax电话吗？（你的控制器方法似乎建议相反）嗯，好吧，但如果我还有一个名为ItemPairing的类别，那么第二个搜索框应该搜索ItemPairing或ItemDescription。在这种情况下，我不能执行类似ItemName.StartsWith（搜索）和&itemsdescription.Contains（搜索）| | ItemPairing.Contains（搜索）这样的操作吗？像这样的吗？嗨，谢谢你的帮助。我发现了一些语法错误。左一条：Controller.Json（object）“”是一个方法，在给定上下文中无效。该错误显示在Json.Encode的行上。我需要为Json导入一些东西吗？我忘了。我相信你必须实现一个库来解析Json。你试过使用CTRL+吗。（dot）在选择方法时？仅使用Json对我有效，我有一个问题。如果我使用部分视图，我还可以使用AJAX调用部分视图的控制器吗？是的，因为部分视图只是像其他HTML一样呈现，所以您总是可以重载部分视图。只要你有多余的东西。例如，我总是用一个div开始我的partials，这个div有一个ID，我知道当我想加载另一个partial，或者加载同一个partial时，我可以覆盖这个ID。我将尝试在答案中创建一个小示例，以便您了解我的意思。它看起来不太好看，因为我是瞎编的，但它可能会帮助你实现你想要的目标。谢谢此外，您还需要将从

Index.cshtml

返回的视图更改为其他视图，前提是

Index.cshtml

是这些文本框所在的主视图。这一点很好！我也意识到了这一点。我让它返回正确的匹配搜索，但因为我返回的是相同的视图，所以什么也没有发生。因此，我必须从上面的框中返回一个包含公共元素的新视图？请参阅更新（不确定是否要最初显示所有项目），非常感谢！在大多数情况下，这正是我想要的（我不想一开始就显示数据）。现在你完全正确了。。。我必须决定是否要搜索这两个框，是否要执行AND或or。目前，它是一个OR。隐马尔可夫模型。。

var url = '@Url.Action("Search", "Items")';
$("#search").click(function () {
  $.post(url, { ItemName: $('#ItemName').val(), ItemText: $('#ItemText').val() }, function(data) {
    $('#result').html(data);
  });
})

public PartialViewResult Search(string itemName, string itemText)
{
  var items = ??
  // filter the data (adjust to suit your needs)
  if (itemName != null)
  {
    items = items.Where(x => x.ItemName.ToUpperInveriant().Contains(itemName.ToUpperInveriant()) 
  }
  if (itemText != null)
  {
    items = items.Where(x => x.ItemDescription.ToUpperInveriant().Contains(itemText.ToUpperInveriant()) 
  }
  // query you data
    return PartialView("_Search", items); 
}

<div id="result">
  @Html.Action("Search") // assumes you want to initially display all items
</div>

@model IEnumerable<Item>
@foreach (var item in Model)
{
  // html to display the item properties
}