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

Official documents:

http://api.jqueryui.com/autocomplete/#entry-examples

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

"1". Jquery.js

"2". Jquery-ui.js

"3". Jquery.ui.autocomplete.css

Then you can use this:

    var submitautocompleted = function (event, UI) {        var $input = $ (this);        $input. Val (Ui.item.label);                 .......    };    var createautocompleted = function () {        var $input = $ (this);        var ajaxoption = {            Source: $input. attr ("data-oft-ajax-autocompleted"),//Tell the AutoComplete component where to get the data            select: submitautocompleted                          //Select an option to process the logic        };        $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//return JSON, in the following format:/ /[//{"label": "Old Restaurant"},{"label": "Old restaurant 1001"},{"label": "Old Restaurant 1002"},//{"label": "Old restaurant 1003"},{" Label ":" Old-brand restaurant 1004 "},{" label ":" Old Restaurant 1005 "},//{" label ":" Old restaurant 1006 "},{" label ":" Old restaurant 1007 "},{" label ":" Old Restaurant 1008 "},        {"Label": "Old restaurant 1009"}//]///</returns> public actionresult autocompleted (string term) {var model = _restaurantreviews.where (R=>r.name.tolower (). Contains (term. ToLower (). Trim ())). Take (10).             Select (r=> new {label = r.name///Anonymous object's field name must be label, because Ui.item.label});        Serialize model into JSON format return JSON (Model,jsonrequestbehavior.allowget); }

It is worth noting that:

The field name of an anonymous object must be a label because it is used in the following JS method:

    var submitautocompleted = function (event, UI) {        var $input = $ (this);        $input. Val (Ui.item.label);        var $form = $input. Parents ("Form:first");        $form. Submit ();    };

Ui.item.label name is fixed, see the fourth step of this article.

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

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 () {    var createautocompleted = function () {        var $input = $ (this);        var ajaxoption = {            Source: $input. attr ("data-oft-ajax-autocompleted")//Tell AutoComplete component where to get 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 process is: Refresh the page (press F5).

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 () {    var submitautocompleted = function (event, UI) {        var $input = $ (this);        $input. Val (Ui.item.label);        var $form = $input. Parents ("Form:first");        $form. Submit ();    };    var createautocompleted = function () {        var $input = $ (this);        var ajaxoption = {            Source: $input. attr ("data-oft-ajax-autocompleted"),//Tell the AutoComplete component where to get the data            select: submitautocompleted                          //Select an option to process the logic        };        $input. AutoComplete (ajaxoption);    }    

With the Firebug plugin of the Firefox browser, you can monitor: The Ui.item.label name is fixed. Obviously, when Item.value does not explicitly set the value, it is automatically assigned a value of Item.labe

　　item-- 's official website explains:

• Item Type:object
  • label Type:stringthe string to display for the item.
  • value Type:stringthe value to insert into the input when the item is selected.

Other information:

Http://www.cnblogs.com/yongheng178/archive/2011/11/15/2249632.html

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