JSFiddle - React, Tailwind, and code Playground

HTML

<input autocomplete="off" id="searchBox" placeholder="חיפוש..." type="text" />

JavaScript

$(function() {
				var queries = [];
                $("#searchBox").autocomplete({
					source: function(request, response) {
						var searchbox = $(this.element);
						var resp = [{
							label: "חיפוש חופשי: " + request.term,
							value: request.term,
							url: location.protocol + '//' + location.host + "/?s=" + request.term
						}];
						searchbox.addClass('sa_searching');	
						var q = $.ajax({
							url: "http://hebrew-academy.org.il/wp-admin/admin-ajax.php",
							dataType: "json",
							data: {
								action: 'autocompleteCallback',
								term: request.term
							},
							success: function(data) {
								var d = $.map(data.results, function(item){
									var title = $("<div />").html(item.title).text();
									return {
										label: title,
										value: title,
										url: item.url
									}
								});
								Array.prototype.push.apply(resp,d);
							},
							error: function(jqXHR, textStatus, errorThrown) {
								console.log(jqXHR, textStatus, errorThrown);
							}
						});
						q.then(function(){
							queries.shift();
							if (queries.length === 0) searchbox.removeClass('sa_searching');
							response(resp);
						});
						response(resp);
					}
				})	
            });