Как показать ссылку в автозаполнениях

Question

Я хочу, чтобы показать ссылку на мое автозаполнение
моего код

$("#search-header").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: "Search", 
         dataType: "json", 
         data: { 
          name: request.term, 
          maxRows: 12 
         }, 
         success: function (data) { 
          response($.map(data.atomList, function (item) { 
           console.log(item); 
           return { 
            label: "<a href=" + item.id + ">" + item.name + "</a>", 
            value: item.id 
           } 
          })); 
         }, 
         error: function (data) { 
          alert(data); 
          console.log(typeof data); 
          console.log(data); 
          alert('error'); 
         } 
        }); 
      },..... 

Он показывает выход, как <a>Text</a> не ссылка, как решить эти

Answer 1

Вы можете использовать renderItem

jQuery(function($) { 
 

 
    $("#search-header").autocomplete({ 
 
    source: function(request, response) { 
 
     //to simulate a async ajax request 
 
     setTimeout(function() { 
 
     var data = { 
 
      atomList: [{ 
 
      id: '1', 
 
      name: 'v-1' 
 
      }] 
 
     } 
 
     response($.map(data.atomList, function(item) { 
 
      return { 
 
      label: item.name, 
 
      value: item.id 
 
      } 
 
     })); 
 
     }) 
 
    } 
 
    }).data('uiAutocomplete')._renderItem = function(ul, item) { 
 
    return $("<li>") 
 
     .append("<a href=" + item.id + ">" + item.value + "</a>") 
 
     .appendTo(ul); 
 
    }; 
 
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" /> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<input id="search-header" />

Answer 2

Вы хотите использовать autocompletes '_renderItem, который позволяет вам определить, как отображается список автозаполнения. В отличие от ответа Аруна мой _renderItem находится внутри декларации автозаполнения, что делает его более читаемым.

$("#search-header").autocomplete({ 
    source: function (request, response 
    $.ajax({ 
     url: "Search", 
     dataType: "json", 
     data: { 
     name: request.term, 
     maxRows: 12 
     }, 
     success: function (data) { 
     response($.map(data.atomList, function (item) { 
      console.log(item); 
      return { 
      label: "<a href=" + item.id + ">" + item.name + "</a>", 
      value: item.id 
      } 
     })); 
     }, 
     error: function (data) { 
     alert(data); 
     console.log(typeof data); 
     console.log(data); 
     alert('error'); 
     }, 
     _renderItem: function (ul, item) { 
     return $("<li></li>") 
      .data("value", item) 
      .append(item.label) 
      .appendTo(ul); 
     } 
    }); 
},.....