Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Autocomplete Component

I'm facing a strange issue with autocomplete.

First issue:

based on the tutorial found here, only the first letter of the found items is showing in the list of autocomplete items

Here is an illustration:

My action at debug time

Dummy data returned, always the same regardless of the search pattern just for testing enter image description here

In the rendered view, this is what happens: enter image description here

The Javascript for autocomplete of this scenario is as follows:

$("#Email").autocomplete('@Url.Action("FindEmail", "Administration")',
{
    dataType: 'json',

    parse: function(data) {
        var rows = new Array();

        for (var i = 0; i < data.length; i++) {

            rows[i] = {
                data: data[i].Value,
                value: data[i].Value,
                result: data[i].Value
            };
        }

        return rows;

    },
    width: 300,
    minLength: 3,
    highlight: false,
    multiple: false
        });

Second issue:

I've changed my code to work with a more comfortable Ajax call for me that depends on Model mapping rather than sending a q and limit parameters as in the previous tutorial, and as I've seen in many other tutorials, but the Ajax call isn't firing, not even giving me an error.

My code for this scenario is based on this Stack Overflow Answer

Here is my controller and view code related:

        //[HttpPost]
        [SpecializedContextFilter]
        [Authorize]
        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
        public JsonResult FindEmail(RegistrationModel model) //Notice the use of model instead of string q and string limit
        {
            //Just a dummy implementation 
            var rez = new List<ValueModel>
            {
                new ValueModel {Description = "[email protected]", Value = "[email protected]"},
                new ValueModel {Description = "[email protected]", Value = "[email protected]"},
                new ValueModel {Description = "[email protected]", Value = "[email protected]"},
                new ValueModel {Description = "[email protected]", Value = "[email protected]"}

            };

            //var retValue = rez.Select(r => new { email = r.Value }).OrderBy(x => x).Take(10);

            //return Json(retValue, JsonRequestBehavior.AllowGet);

            return Json(rez, JsonRequestBehavior.AllowGet);
        }

View JavaScript:

    $("#Email").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '@Url.Action("FindEmail", "Administration")',
                type: "POST",
                dataType: "json",

                data: { email: $("#Email").val(), conferenceId: $("#ConferenceId").val() },

                success: function(data) {
                    response($.map(data, function(item) {
                        return { label: item.Value, value: item.Value, id: item.Value };
                    }));
                },
                select: function(event, ui) {
                    $("input[type=hidden]").val(ui.item.id);
                }
            });
        }
    });

Firefox console view:

enter image description here

I've tried a lot of codes for the second scenario, most of them are Stack Overflow answers, but nothing is happening!

I'm my missing anything ?

Note: jQuery plugins are included, Ajax is already working in the same page, so I'm not sure whats the problem

Thanks for any help.

like image 304
sameh.q Avatar asked Mar 26 '14 13:03

sameh.q


People also ask

What is Autocomplete jQuery?

Advertisements. Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the list, which will be displayed in the input field.

How do I use Autocomplete widget?

The widget is attached to the <input> using the autocomplete() method. We supply an object literal as an argument to the method, which configures the source option and the select and change event callbacks. The source option is used to tell the widget where to get the suggestions for the Autocomplete menu from.

How can create Autocomplete search box in jQuery?

Syntax: $("TagId"). autocomplete({ source : itemList // List of Words. })

What is Autocomplete in JavaScript?

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source-option. 1.


1 Answers

Here is a full working example, see screen grab.

These are the steps that I had take to get the second example working.

Script-references/Markup/Js

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<input id="ConferenceId" value="1" />
<div class="ui-widget">
  <label for="Email">Email: </label>
  <input id="Email">
</div>
<script type="text/javascript">
    $("#Email").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("FindEmail", "Administration")',
                type: "POST",
                dataType: "json",

                data: { email: $("#Email").val(), conferenceId: $("#ConferenceId").val() },

                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Value, value: item.Value, id: item.Value };
                    }));
                },
                select: function (event, ui) {
                    $("input[type=hidden]").val(ui.item.id);
                }
            });
        }
    });
    </script>

Models

    public class RegistrationModel
    {
        public string Email { get; set; }
        public string ConferenceId { get; set; }
    }

    public class ValueModel
    {
        public string Description { get; set; }
        public string Value { get; set; }
    }

Controller Action

I had to add the [HttpPost] attribute.

[HttpPost]
public JsonResult FindEmail(RegistrationModel model) //Notice the use of model instead of string q and string limit
{
    //Just a dummy implementation 
    var rez = new List<ValueModel>
    {
        new ValueModel {Description = "[email protected]", Value = "[email protected]"},
        new ValueModel {Description = "[email protected]", Value = "[email protected]"},
        new ValueModel {Description = "[email protected]", Value = "[email protected]"},
        new ValueModel {Description = "[email protected]", Value = "[email protected]"}

    };

    return Json(rez, JsonRequestBehavior.AllowGet);
}

Screen grab

enter image description here

like image 76
hutchonoid Avatar answered Sep 19 '22 16:09

hutchonoid