not able to mention data text field in autocomplete extender

Question

I am using this kendo ui autocomplete widget for textbox by using the following method in controller:

public ActionResult GetItems(string term)
{
    ContextObject contextObject = new ContextObject();
    TransactionHistory transactionhistory = new TransactionHistory();
    var items = transactionhistory.GetItems(contextObject, term);
    // the above method will gives list of strings
    return Json(items, JsonRequestBehavior.AllowGet);                     
}

and this is my view:

@(Html.Kendo().AutoComplete()
      .Name("ItemSearch")
      .DataTextField("RPersonDetails")
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetItems", "TransactionHistoryResults")
                  .Data("onAdditionalData");
          })
          .ServerFiltering(true);              
      })
      .HtmlAttributes(new { style = "width:100px" })
)

<script type="text/javascript">
   function onAdditionalData() {
        return {
            text: $("#ItemSearch").val()
        };
    }
</script> 

In the link we have got datatextfield that is for Specifying which property of the Product(table) to be used by the autocomplete and in my scenario this method transactionhistory.GetItems(contextObject, term); is giving list of strings, so in that case what I need to mention in this field DataTextField("RPersonDetails") in place of RPersonDetails.

Do I need to change the GetItems method? Please give any suggestions and ideas on this one.... Many thanks In advance....

Answer 1

For Server Filtering refer to the following:

public JsonResult MyProducts(string text)
{
    List<string> myStrings = new List<string>();
    myStrings.Add("Aa");
    myStrings.Add("ACB");
    myStrings.Add("cc");

    System.Text.RegularExpressions.Regex regEx = new System.Text.RegularExpressions.Regex(text, RegexOptions.IgnoreCase);
    var results = myStrings
        .Where<string>(item => regEx.IsMatch(item))
        .ToList<string>();

    return Json(results, JsonRequestBehavior.AllowGet);
}

UI:

@(Html.Kendo().AutoComplete()
    .Name("productAutoComplete")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("MyProducts", "Sample")
                .Data("onAdditionalData");
        })
        .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
    }
    )
    .Events(e => e
        .Select("autocomplete_select")
        .Change("autocomplete_change")
    )
)

Script:

function onAdditionalData() {
    return {
        text: $("#productAutoComplete").val()
    };
}

Answer 2

Here is a complete workinng sample for kendo ui auto-complete and retrieving selected value in controller. It uses hidden field for setting the selected value.

controller

public class SampleController : Controller
    {


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

        public JsonResult MyProducts()
        {
            List<string> myStrings = new List<string>();
            myStrings.Add("AA");
            myStrings.Add("AB");
            return Json(myStrings, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult PostValues(sampleModel model)
        {

            string temp = model.SelectedItem;
            return View("Index");

        }

    }

Model

public class sampleModel
    {
        public string SelectedItem { get; set; }
    }

VIEW

@model  MyNamespace.sampleModel

@Scripts.Render("~/bundles/jquery")
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using( @Html.BeginForm("PostValues","Sample" ))
{
@Html.HiddenFor(model => model.SelectedItem)


@(Html.Kendo().AutoComplete()
      .Name("productAutoComplete")
      .DataSource(source =>
      {
              source.Read(read =>
             {
                 read.Action("MyProducts", "Sample")
                          .Data("onAdditionalData");
             });
      }
      )
      .Events(e => e
        .Select("autocomplete_select")
        .Change("autocomplete_change")
    )

)

<input id="Button1" type="submit" value="PostValues" />
}
<script>
    function onAdditionalData() {
        return {
            text: $("#productAutoComplete").val()
        };
    }

    function autocomplete_select()
    {

    }

    function autocomplete_change() {
        $('#SelectedItem').val($("#productAutoComplete").val());
        alert($('#SelectedItem').val());
    }


</script>

Answer 3

The DataTextField method is for specifying the property of an object in the list. If your result set is just a list of strings maybe you don't need to specify the DataTextField; try removing it.