I have the working code of Jquery Tag-it to autocomplete code for backend ajax request, Also I found the working code of Algolia search autocomplete, I just want to merge these codes and use algolia autocomplete in the jquery tagit library. I tried to merge them but start getting errors in the console.
Thanks in advance
//jquery tagit code
<!DOCTYPE html>
<html>
<head>
<title>Using jQuery UI Tag-it</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="http://aehlke.github.io/tag-it/css/jquery.tagit.css">
</head>
<body>
<div class="container">
<h2>Add</h2>
<br>
<form id="form">
<div class="form-group">
<label for="category">Category </label>
<input type="text" name="category" id="category" class="form-control">
</div>
<input type="submit" value="submit" class="btn btn-primary ">
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://rawgit.com/aehlke/tag-it/master/js/tag-it.js"></script>
<script>
$(document).ready(function () {
$("#category").tagit({
autocomplete: {
source: function( request, response ) {
console.log(request);
$.ajax({
url: "/autocomplete",
dataType: "json",
data: {
'search':request.term
},
success: function (data) {
response($.map(data, function (category) {
return {
label: category.name,
};
}));
}
});
}
}
});
});
</script>
</body>
</html>
Algolia autocomplete code
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/instantsearch.css@7/themes/satellite-min.css"
/>
<title>InstantSearch | Autocomplete</title>
</head>
<body>
<div class="container">
<div class="aa-input-container" id="aa-input-container">
<input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search with algolia..." name="search"
autocomplete="off" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script>
(function() {
let client = algoliasearch('Algolia-app-id', 'Algolia-search-key');
let index = client.initIndex('categories');
let enterPressed = false;
//initialize autocomplete on search input (ID selector must match)
autocomplete('#aa-search-input',
{ hint: false }, {
source: autocomplete.sources.hits(index, { hitsPerPage: 10 }),
//value to be displayed in input control after user's suggestion selection
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function (suggestion) {
console.log(suggestion)
const markup = `
<div class="algolia-details">
<span>${suggestion.name}</span>
</div>
`;
return markup;
},
empty: function (result) {
return 'Sorry, we did not find any results for "' + result.query + '"';
}
}
}).on('autocomplete:selected', function (event, suggestion, dataset) {
console.log(suggestion)
// window.location.href = window.location.origin + '/shop/' + .slug;
// enterPressed = true;
}).on('keyup', function(event) {
if (event.keyCode == 13 && !enterPressed) {
window.location.href = window.location.origin + '/search-algolia?q=' + document.getElementById('aa-search-input').value;
}
});
})();
</script>
</body>
</html>
After two days of searching, I found following solution