jQuery用户界面自动完成组合框控件例如修改AJAX源 [英] jquery ui autocomplete combobox widget example modified for ajax source

问题描述

有没有人成功地修改了AJAX源上述部件？我已经能够进行修改，它工作正常使用的选项搜索词高亮的除外。更具体地说，低于code。

Has anyone successfully modified the above mentioned widget for ajax source? I've been able to make the modifications and it works fine with the exception of the search term highlighting of the options. More specifically the below code.

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
                                };
                        }) );

下面是我修改的部件：

(function ($) {
    $.widget("ui.Clients", {
        _create: function () {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>")
                .insertAfter(select)
                .val(value)
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function (request, response) {
                        $.ajax({
                            url: "/Controller/Action", type: "POST", dataType: "json",
                            data: { searchText: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        value: item.ClientName,
                                        id: item.ClientId
                                    }
                                }))
                            }
                        })
                    },

任何人都可以帮助整合这些功能到我的Ajax调用？

Can anyone assist with integrating that functionality into my ajax call?

推荐答案

小部件希望那里是从响应返回值的标签属性。标签属性是显示在自动完成窗口。如果没有指定label属性，它只是将value属性。所以，你需要做的是改变了标签的财产原值和item.ClientName替换文字

The widget expects there to be a label property in the return value from the response. The label property is what is displayed in the autocomplete window. If you don't specify a label property, it will just the value property. So, all you need to do is alter the original value for the label property and replace the text with item.ClientName

(function ($) {
    $.widget("ui.Clients", {
        _create: function () {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>")
                .insertAfter(select)
                .val(value)
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function (request, response) {
                        $.ajax({
                            url: "/Controller/Action", type: "POST", dataType: "json",
                            data: { searchText: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        value: item.ClientName,
                                        id: item.ClientId,
                                        label: item.ClientName.replace(
                                                new RegExp(
                                                    "(?![^&;]+;)(?!<[^<>]*)(" +
                                                    $.ui.autocomplete.escapeRegex(request.term) +
                                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                ), "<strong>$1</strong>" ),
                                    }
                                }))
                            }
                        })
                    },

这篇关于jQuery用户界面自动完成组合框控件例如修改AJAX源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！