Problem with delimitir using jquery and mvc razor

Question

I cannot add multiple values ​​to the same field. I can select only one value, and after entering,, ; or another delimiter character I cannot select another. I want it to work like autocomplete.

I have a text box with jQuery string:

 <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <script type="text/javascript"> $(document).ready(function () { $("#Name").autocomplete('@Url.Action("TagName", "Tag")', { minChars: 1, delimiter: /(,|;)\s*/, onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); } }); }); </script> 

It uses my controller data:

 public ActionResult TagName(string q) { var tags = new List<TagModel> { new TagModel {Name = "aaaa", NumberOfUse = "0"}, new TagModel {Name = "mkoh", NumberOfUse = "1"}, new TagModel {Name = "asdf", NumberOfUse = "2"}, new TagModel {Name = "zxcv", NumberOfUse = "3"}, new TagModel {Name = "qwer", NumberOfUse = "4"}, new TagModel {Name = "tyui", NumberOfUse = "5"}, new TagModel {Name = "asdf[", NumberOfUse = "6"}, new TagModel {Name = "mnbv", NumberOfUse = "7"} }; var tagNames = (from p in tags where p.Name.Contains(q) select p.Name).Distinct().Take(3); string content = string.Join<string>("\n", tagNames); return Content(content); } 

I use these scripts:

 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script> <link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" /> 

There is no error in firebug. What is wrong with my code?

Answer 1

Have experienced such problems with firebug.

I suggest not trusting the Firebug console until it contains error messages

If your code does not work as expected, and firebug does not show you any error messages, then you need to check your web page in chrome and see exactly where the exception is not handled on the Console tab , especially when you're using ajax .

Answer 2

I would recommend you use the more recent jQuery UI autocomplete plugin . JQuery ui 1.8 is even distributed as part of the new ASP.NET MVC 3 projects.

As for your code, try fixing it like this:

 var url = '@Url.Action("TagName", "Tag")'; $('#Name').autocomplete(url, { minChars: 1, multiple: true, formatResult: function(row) { return row[0].replace(/(<.+?>)/gi, ''); } }).result(function (event, data, formatted) { alert(!data ? "No match!" : "Selected: " + formatted); }); 

Answer 3

The autocomplete function, which is included in the jQuery user interface, has a different code format than the stand-alone jQuery plugin. Details on this can be found on the jQuery UI website at the link below.

http://jqueryui.com/demos/autocomplete/

Here is a simple jQuery UI autocomplete function

 $( "#Name" ).autocomplete({ source: url, minLength: 1, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value ); } }); 

Answer 4

What version of autocomplete you are using, jquery ui does not support this. See http://jqueryui.com/demos/autocomplete/#multiple for details.

This is a snippet of a page to set up multiple selections.

 .autocomplete({ minLength: 0, source: function( request, response ) { // delegate back to autocomplete, but extract the last term response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } }); 

Answer 5

• Create a div (container).

• Style to make it look like a text area.

• Place the text box inside the div. Take a swim. Clear the borders. (So, with the cursor in the text box, the div will really look like a text area.)

• Link autocomplete to this field.

• In the selection window, create a span or div or something like this `TheLabel and add it to the div (container).

  1. Before adding it, save the object in span using jquery .data()

  2.It will make a good user interface.

• If you do, you can also delete the previous selection.