$(function () {

    $("#name-list").autocomplete(
    {
        source: function (request, response) {
            $.ajax(
            {
                url: "/Search/GetProductsName", type: "POST", dataType: "json",
                data: { searchText: request.term, maxResults: 20 },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Text }
                    }))
                }
            })
        },
        select: function (event, ui) {
            this.value = ui.item.label;
        }
    });

    $.widget("ui.combobox", {
        _create: function () {
            var self = this, select = this.element.hide(), selected = select.children(":selected"), value = selected.val() ? selected.text() : "";
            var input = $("<input onclick='this.select();' style='font-weight:bold'>")
					.insertAfter(select)
					.val(value)
					.autocomplete({
					    selectFirst: false,
					    delay: 0,
					    minLength: 0,
					    source: function (request, response) {
					        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
					        response(select.children("option").map(function () {
					            var text = $(this).text();
					            if (this.value && (!request.term || matcher.test(text)))
					                return {
					                    label: text.replace(
											new RegExp(
												"(?![^&;]+;)(?!<[^<>]*)(" +
												$.ui.autocomplete.escapeRegex(request.term) +
												")(?![^<>]*>)(?![^&;]+;)", "gi"
											), "<strong>$1</strong>"),
					                    value: text,
					                    option: this
					                };
					        }));
					    },
				        select: function (event, ui) {
					        ui.item.option.selected = true;
					        self._trigger("selected", event, {
					            item: ui.item.option
					        });
					    },
					    change: function (event, ui) {

					        var uiItemIsEmpty = false;
					        if ($.browser.msie) {
					            if (!this.value) {
					                uiItemIsEmpty = true;
					            }
					        }
					        else {
					            if (!ui.item) {
					                uiItemIsEmpty = true;
					            }
					        }
					        if (uiItemIsEmpty) {
					            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
									valid = false;
					            select.children("option").each(function () {
					                if (this.value.match(matcher)) {
					                    this.selected = valid = true;
					                    return false;
					                }
					            });
					            if (!valid) {
					                // remove invalid value, as it didn't match anything
					                $(this).val("");
					                select.val("");
					                return false;
					            }
					        }
					    }
					})
					.addClass("ui-widget ui-widget-content ui-corner-left");

            input.data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
						.data("item.autocomplete", item)
						.append("<a>" + item.label + "</a>")
						.appendTo(ul);
            };

            $("<button type='button'>&nbsp;</button>")
					.attr("tabIndex", -1)
					.attr("title", "Afficher tout")
					.insertAfter(input)
					.button({
					    icons: {
					        primary: "ui-icon-triangle-1-s"
					    },
					    text: false
					})
					.removeClass("ui-corner-all")
					.addClass("ui-corner-right ui-button-icon")
					.click(function () {
					    // close if already visible
					    if (input.autocomplete("widget").is(":visible")) {
					        input.autocomplete("close");
					        return false;
					    }

					    // pass empty string as value to search for, displaying all results
					    input.autocomplete("search", "");
					    input.focus();
					    return false;
					});
        }
    });

});