JQuery autocomplete выделить текст в виде таблицы

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/

Обновите свою

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

С этим

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