"ASP. NET MVC" uses jquery AutoComplete components in ASPNET MVC

Using the jquery AutoComplete component in ASPNET MVC

To use the jquery AutoComplete component, you need to refer to:

"1". Jquery.js

"2". Jquery-ui.js

Then you can use this:

    var submitautocompleted = function (event  , UI) {        var$input = $ ( This);                 $input. Val (Ui.item.label);    .......    }; varcreateautocompleted =function () {var$input = $ ( This); varAjaxoption ={source: $input. attr (  "data-oft-ajax-autocompleted"),//tell the AutoComplete where the component goes to get the data            Select:submitautocompleted                          //after selecting an option, the logic to be processed        };    $input. AutoComplete (ajaxoption); }    $( "input[data-oft-ajax-autocompleted]"). each (createautocompleted);

　　1.1 Goals

Automatically enter a hint function for the text box implementation. Like what:

Enter "K" in the text box to automatically prompt for any options you might want to enter that begin with "K".

1.2 Implementation Steps

First step: Create a autocompleted Aciton in the controller

Returns the type Jsonresult. Provide JSON-formatted data for the jquery AutoComplete component

        /// <summary>        ///         /// </summary>        /// <param name= "term" ></param>        /// <returns>                //http://localhost: 3951/reviews/autocompleted?term= Old//returns the JSON, in the following format://  [        //{"label": "Old Restaurant"},{"label": "Old restaurant 1001"},{"label": "Old Restaurant 1002"},//{"label": "Old restaurant 1003"},{"label": "Old restaurant 1004"},{"label": "Old Restaurant 1005"},//{"label": "Old restaurant 1006"},{"label": "Old restaurant 1007"},{"label": "Old restaurant 1008"},{"label": "Old restaurant 1009"}//  ]        /// </returns>         PublicActionResult autocompleted (stringTerm ) {            varModel = _restaurantreviews.where (r=>R.name.tolower (). Contains (term. ToLower (). Trim ())). Take (Ten)                . Select (R=New{Label=r.name}); //serialize model into JSON format            return Json (model,jsonrequestbehavior.allowget); }

Step Two: Add attribute data-otf-autocomplete to the text box for the anchor point

<input type="search" name="searchkey"
　　　　data-oft-ajax-autocompleted="@Url. Action ("autocompleted") " />

@Url. Action ("autocompleted") is the action that points to the first step definition:

Public ActionResult autocompleted (string term )

　　

Step Three: Add JavaScript code handling

$ (function () {varcreateautocompleted =function () {var$input = $ ( This); varAjaxoption ={Source: $input. attr ("data-oft-ajax-autocompleted")//tell the AutoComplete where the component goes to get the data        };    $input. AutoComplete (ajaxoption); }    $("input[data-oft-ajax-autocompleted]"). each (createautocompleted);}); 

In this step, we realized the automatic prompt input function.

Note that when you do not see the effect, try to check for the following reasons: If the above JS code is in the original JS file (for example: Abc.js) added, the browser has already loaded the JS file, it is possible to not load the JS file, resulting in the JS file does not exist in our third step to add the JS code. The solution is: Turn off the browser and then open it.

Fourth step: Add the logic that you need to handle when you select an item under the prompt:

Add the Select parameter in Ajaxoptin:

To demonstrate here, after an item in the text box is selected, the form that causes its parent HTML to submit the form, the HTML code is as follows:

<form method="Post"Action="@Url. Action ("Index")"Data-otf-ajax="true"Data-otf-ajax-updatetarget="#restaurantList"> <input type="Search"Name="Searchkey"Data-oft-ajax-autocompleted="@Url. Action ("autocompleted")"/></form>

Then, add the JAVASCRTPT code in the JS file, making

When an item in a text box is selected, the form that causes its parent HTML is submitted

$ (function () {varsubmitautocompleted = function (Event, UI) {        var$input = $ ( This);        $input. Val (Ui.item.label); var$form = $input. Parents ("Form:first");    $form. Submit ();    }; varcreateautocompleted =function () {var$input = $ ( This); varAjaxoption ={Source: $input. attr ("data-oft-ajax-autocompleted"),//tell the AutoComplete where the component goes to get the data            Select:submitautocompleted                         //after selecting an option, the logic to be processed        };    $input. AutoComplete (ajaxoption); }    $("input[data-oft-ajax-autocompleted]"). each (createautocompleted);}); 

"The End"