JSFiddle - React, Tailwind, and code Playground
by rajeshpillai
HTML
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<input type="text" class="hizliaratext" />
<div id="hizliara"></div>
JavaScript
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var searchkey = "";
var itemtype = "";
var searchtype = "";
var self = this,
currentCategory = "";
$.each(items, function(index, item) {
if (typeof item.kelime != 'undefined') {
searchkey = item.kelime;
}
if (item.category != currentCategory) {
if (item.category == "Bölge" || item.category == "Şehir") {
itemtype = "cat-bolgeler";
} else if (item.category == "Otel") {
itemtype = "cat-oteller";
searchtype = "otel";
} else if (item.category == "Yurt Dışı Tur") {
itemtype = "cat-ydtur";
searchtype = "yurtdisitur";
} else if (item.category == "Yurt İçi Tur") {
itemtype = "cat-yitur";
searchtype = "yurticitur";
} else if (item.category == "Cruise") {
itemtype = "cat-cruise";
searchtype = "cruise";
}
if (searchtype != "") {
ul.append($("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'><a href='/arama/" + searchkey + "?k=" + searchtype + "&q=" + searchkey + "'>" + item.category + "</a></li>").data("item.autocomplete", {}));
} else {
ul.append($("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'>" + item.category + "</li>").data("item.autocomplete", {}));
}
currentCategory = item.category;
}
self._renderItem(ul, item);
});
}
});
$(function() {
$(".hizliaratext").catcomplete({
source: [{"searchid":2001,"label":"Alba Ankara...