Jquery UI autocomplete in Asp.net MVC
A nice feature of the JQuery library is its autocoplete feature. So when we start typing into an html input text, it is a feature that offers us some suggestions. The suggestion lists we frequently see in search engines can give us an idea.
In order to perform this operation, the action method to be used by JQuery must be prepared.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Search(string term) { var data = names.Where(m => m.Contains(term)) .Select(m => new { label = m }); return Json(data, JsonRequestBehavior.AllowGet); } private List<string> names = new List<string> { "ankara", "istanbul", "izmir", "erzurum", "manisa", "bursa", "antalya", "artvin", }; } |
The method we use is the Search action method. So when we make an entry in the text box, JQuery will automatically bring the results to us by searching the Search () method and searching for the text in the names list. For live applications, instead of using a list like here, we can access the database and get the actual data.
Now go to the Index view page and continue by creating a text box.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<h2>Test Page</h2> <script type="text/javascript"> $(function () { $(":input[data-autocomplete]").each(function () { $(this).autocomplete({ source: $(this).attr("data-autocomplete") }) }); }); </script> <div> <label>Search</label> <input type="text" data-autocomplete="@Url.Action("Search","Home")" /> </div> |
The content of our ndex view page should be as above. Let’s talk about what we do.
First of all, we have received all the autocomplete elements using a multiple selector such as $ (olan: input [data-autocomplete] multiple). Then, we took a stroll through each of these elements. Since the Autocomplete mechanism is a control that needs a source (data source), whichever text input is to give the autocomplete property, we define a property in the name of data-autocomplete. Then we specify the source we want to give to this feature. Here we specify the Search action method of the Home controller class. This way, the Search method is triggered automatically when we overwrite input text.
if you have question do not forget to write from the chat button next to it or from the comment
Recent Comments