Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's some code as to how I have accomplished this. I am using the <a href="http://jqueryui.com/" rel="nofollow">jquery UI</a> plugin</p> <p><strong>The javascript on my View</strong></p> <blockquote> <p>$(function () {</p> </blockquote> <pre><code> $("#suburb").autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("ManufacturerAutoComplete", "AutoComplete")', type: "POST", dataType: "json", data: { searchText: request.term, maxResults: 10 }, success: function (data) { response($.map(data, function (item) { return { label: item.DisplayValue, value: item.Suburb, id: item.SuburbID, postcode: item.Postcode, state: item.State } })) } }) }, select: function (event, ui) { $("#state").val(ui.item.state); $("#postcode").val(ui.item.postcode); } }); </code></pre> <p><strong>The input on my view</strong></p> <pre><code>&lt;input type="text" id="suburb" /&gt; </code></pre> <p><strong>And finally the code from my Controller</strong></p> <pre><code>[HttpPost] public JsonResult ManufacturerAutoComplete(string searchText) { if (searchText.Length &gt; 2) { var service = new SuburbSearchServiceClient(); var results = service.SearchSuburb(searchText, "Australia"); List&lt;Suburbs&gt; sList = new List&lt;Suburbs&gt;(); foreach (var item in results) { sList.Add(new Suburbs() { SuburbID = item.SuburbID, Suburb = item.Suburb, State = item.State, Postcode = item.Postcode, DisplayValue = item.Suburb + " - " + item.State + " - " + item.Postcode }); } return Json(sList); } else { var data = string.Empty; return Json(data); } } </code></pre> <p>You need to include the js and css from the jquery-ui plugin and the results of your auticomplete will be shown underneath the input element. As you can see from the JsonResult method, I am calling a web service to get my suburb data, but this could come from anywhere in reality. Hope this helps. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload