Jquery自动完成突出显示表格列表中的文本

Question

我找到了这个源代码，但无法突出显示搜索到的文本， 浪费2-3小时但找不到写入的位置来替换搜索到的文本 请帮助某人......................

$.widget('custom.mcautocomplete', $.ui.autocomplete, {
    _create: function () {
        this._super();
        this.widget().menu("option", "items", "> :not(.ui-widget-header)");
    },
    _renderMenu: function (ul, items) {
        var self = this,
            thead;
        if (this.options.showHeader) {
            table = $('<div class="ui-widget-header" style="width:100%"></div>');
            $.each(this.options.columns, function (index, item) {
                table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
            });
            table.append('<div style="clear: both;"></div>');
            ul.append(table);
        }
        $.each(items, function (index, item) {
            self._renderItem(ul, item);
        });
    },
    _renderItem: function (ul, item) {
        var t = '',
            result = '';
        $.each(this.options.columns, function (index, column) {
            t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
        });
        result = $('<li></li>')
            .data('ui-autocomplete-item', item)
            .append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>')
            .appendTo(ul);
        return result;
    }
});


// Sets up the multicolumn autocomplete widget.
$("#search").mcautocomplete({
    // These next two options are what this plugin adds to the autocomplete widget.
    showHeader: true,
    columns: [{
        name: 'City',
        width: '150px',
        valueField: 'name'
    }, {
        name: 'State',
        width: '120px',
        valueField: 'adminName1'
    }, {
        name: 'Country',
        width: '120px',
        valueField: 'countryName'
    }],

    // Event handler for when a list item is selected.
    select: function (event, ui) {
        this.value = (ui.item ? ui.item.name : '');
        $('#results').text(ui.item ? 'Selected: ' + ui.item.name + ', ' + ui.item.adminName1 + ', ' + ui.item.countryName : 'Nothing selected, input was ' + this.value);
        return false;
    },

    // The rest of the options are for configuring the ajax webservice call.
    minLength: 1,
    source: function (request, response) {
        $.ajax({
            url: 'http://ws.geonames.org/searchJSON',
            dataType: 'jsonp',
            data: {
                featureClass: 'P',
                style: 'full',
                maxRows: 12,
                name_startsWith: request.term,
                username: "demo"
            },
            // The success event handler will display "No match found" if no items are returned.
            success: function (data) {
                var result;
                if (!data || data.length === 0 || !data.geonames || data.geonames.length === 0) {
                    result = [{
                        label: 'No match found.'
                    }];
                } else {
                    result = data.geonames;
                }
                response(result);
            }
        });
    }
});

<div style="margin:10px 10px;padding:8px;width:400px;" class="ui-widget ui-widget-content ui-corner-all">
    <div style="margin:0 0 14px 0; font-size:.7em;">An example of a 3 column autocomplete control.</div>
    <div style="margin:0 0 4px 4px;">Find a city</div>
    <!-- This is the input control that gets turned into the jquery ui widget -->
    <input id="search" type="text" style="padding:2px;font-size:.8em;width:300px;" />
    <div style="font-size:0.7em;color:#999;">Makes use of the web service at <a href="http://geonames.org">geonames.org</a>
    </div>
  
</div>

http://jsfiddle.net/alforno/g4stL/

Answer 1

希望您正在寻找http://jsfiddle.net/nileshyadav987/g4stL/1205/

更新您的

C:/dir1/dic2

有了这个

_renderItem: function (ul, item) {
        var t = '',
            result = '';
        $.each(this.options.columns, function (index, column) {
            t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
        });
        result = $('<li></li>')
            .data('ui-autocomplete-item', item)
            .append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>')
            .appendTo(ul);
        return result;
    }