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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.