如何根据输入的名称自动完成的表格 [英] How to autocomplete forms based on the name entered

问题描述

我有一个名为数据库表客户。此表包含名称，电话，电子邮件和地址。
有一个表格，客户可以填补所有这些领域。我有 jQueryUI的-自动完成在名称字段。

I have a database table called Customers. This table contains Name, Phone, Email and Address. There is a form where the customer can fill all these fields. I have JqueryUI-Autocomplete on the Name field.

这是所有工作正常。不过，我坚持的是：我如何可以检查是否在文本字段中输入的名称是一样的，在数据​​库中的名称

This is all working ok. However, what I'm stuck is: How can I check if the name entered in the text field is the same as a name in the database?

我已经试过：

<script>
    $(function ()
    {
        $("#Customer_Name").autocomplete(
            {
                source: "/Home/AutoCompleteSuggestions",
                select: function (event, ui)
                {
                    $("#Customer_Phone").val(@Model.entity.Customers.ToList().Find(//What do I insert here? Where do i get it from?);
                }
            });
    });
</script>

我的问题是在 .Find（）我怎么会发现，是文本中的文本，或者从自动完成下拉列表中选中文本？

My problem is at .Find() how would I find the text that is inside the textbox, or the text that was selected from the autocomplete dropdown?

据我知道，我不能，因为它是JavaScript的使用 UI 变量。

As far as I know, I can't use the ui variable because it is javascript.

编辑2：

我试图用Ajax做到这一点，但我不确定如何做到这一点。

I'm trying to do it with ajax, but am unsure how to do it.

这是我的code：

var text = $('#Customer_Name').val();
                    $.ajax({
                        type: "POST",
                        url: "/Home/MyActionResult",
                        data: text,
                        success: function () {
                            alert('success');
                        }
                    });

不知该放在什么样的控制器，并在改变文本框的值

Unsure what to put in the controller, and where to change the textbox values

推荐答案

假设你有jQuery和jQuery用户界面库（与jQuery UI CSS）加载到你的页面。

Assuming you have jQuery and jQuery UI libraries(with jQuery ui css) loaded in your page.

<input type="text" id="Customer_Name"/>
<div id="Customer_Phone"></div>

@section scripts{
<script>

 $(function(){

    $( "#Customer_Name" ).autocomplete({
      source: "@Url.Content("Search","Home")",
      minLength: 2,
      select: function (event, ui) {

        //If you want to do something on the select event, you may do it here
        $("#phoneNumber").html(ui.item.phone);
      }
    });

 })

</script>
}

您需要有一个操作方法，以返回JSON格式像下面

You need to have an action method to return the auto complete response in the JSON format like below

public ActionResult Search(string term)
{
    var db= new MyDbContext();
    var results = db.Customers.Where(s => s.Name.StartsWith(term))
            .Select(x=>new {  id =x.Id, 
                              value=x.Name , 
                              phone=x.Phone})
            .ToList();
    return Json(results,JsonRequestBehavior.AllowGet);
}

这篇关于如何根据输入的名称自动完成的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！