jquery - How to show link in autocomplete -
i want show link autocomplete
code
$("#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'); } }); },.....
it showing output <a>text</a>
not link how resolve this
you can use renderitem
jquery(function($) { $("#search-header").autocomplete({ source: function(request, response) { //to simulate 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" />
Comments
Post a Comment