jquery autocomplete not showing the selected value in textbox

Question

I am creating a search bar using jquery autocomplete.

Here is my autocomplete code:

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $(".txtSearch").autocomplete(
            {
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("AutoComplete", "components")',
                        type: "GET",
                        data: request,
                        success: function (data) {
                            response($.map(data, function (el) {
                                return {
                                    label: el.autoSuggest,
                                    value: el.resultCount
                                };
                            }));
                        }
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    $(this).val(ui.item.label);
                    var values = ui.item.label;
                    $.ajax({
                        type: 'GET',
                        contentType: 'application/json',
                        cache: false,
                        url: '@Url.Action("SearchFunc", "components")',
                        dataType: 'json',
                        data: { searchTerm: values }
                    }).done(function (result) {

                        window.location.href = "search.aspx?pass=" + encodeURIComponent(result);
                    })
                }
            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
            .data("ui-autocomplete-item", item)
            .append("<a><table width='100%'><tr><td><strong>" + item.label + "</strong></td><td align='right' style='font-size: 10px;'>" + item.value + "</td></tr></table></a>")
            .appendTo(ul);
            };
        });
    });
</script>

For example if anyone starts typing 'shi', the autocomplete shows output like this:

shirts      2results
tshirts     3results

My problem is that when i select any auto-suggest options, the text-box shows only the value and not the label.

For example in the above case, if I select shirts, the text-box shows 2results. But the parameter passed in my 2nd ajax function is correct i.e. shirts

Can anyone suggest a solution?

Answer 1

I have finally solved the issue( thanks to Salman A :)). Here is what I did:

I have added the event.preventDefault() in select event as suggested by Salman

Also I have added the focus event.

So the final code is :

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $(".txtSearch").autocomplete(
            {
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("AutoComplete", "components")',
                        type: "GET",
                        data: request,
                        success: function (data) {
                            response($.map(data, function (el) {
                                return {
                                    label: el.autoSuggest,
                                    value: el.resultCount
                                };
                            }));
                        }
                    });
                },
                minLength: 3,
                focus: function (event, ui) {
                    event.preventDefault();
                    $(this).val(ui.item.label);
                },
                select: function (event, ui) {
                    event.preventDefault();
                    $(this).val(ui.item.label);
                    var values = ui.item.label;
                    $.ajax({
                        type: 'GET',
                        contentType: 'application/json',
                        cache: false,
                        url: '@Url.Action("SearchFunc", "components")',
                        dataType: 'json',
                        data: { searchTerm: values }
                    }).done(function (result) {
                        if (result == null || result == "") {
                            result = 0;
                        }

                        window.location.href = "search.aspx?pass=" + encodeURIComponent(result);
                    })
                }
            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
            .data("ui-autocomplete-item", item)
            .append("<a><table width='100%'><tr><td><strong>" + item.label + "</strong></td><td align='right' style='font-size: 10px;'>" + item.value + "</td></tr></table></a>")
            .appendTo(ul);
            };
        });
    });
</script>

Answer 2

I think you need to cancel the default action in the select event:

select: function (event, ui) {
    event.preventDefault();
    $(this).val(ui.item.label);
    // rest of code

If you do not cancel the select event, jQuery UI will overwrite the textbox text with the item's value.

PS: I would rather not nest tables inside links. Use floated spans.