JSFiddle - React, Tailwind, and code Playground

by BaronGrivet

HTML

<section class="searchform">
      <form id="search_form" name="search" action="/search" class="clearfix" _lpchecked="1">
        <input type="submit" value="Go" class="submit">
        <input id="topsearch" type="text" class="text ui-autocomplete-input" name="q" autocomplete="off"><span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
      </form>
    </section>

JavaScript

$(document).ready(function() {
	var cache = {};
	$( '#topsearch' ).autocomplete({
		source: function( request, response ) {
			if (request.term in cache) {
				response(cache[request.term]);
				return;
			}
          	var words = request.term.split(" ");
          	var search_string = '';
	        var i;
			for (i = 0; i < words.length; ++i) {
              if(words[i].length>0){
                if(i > 0){
                  search_string += ' AND ';
                }
                search_string += 'title:*'+words[i]+'* OR vendor:*'+words[i]+'*';
              }
			}	
          
			$.ajax({
				url: "https://www.burkescycles.co.nz/search", 
				data: {
                  q: search_string,
					type: "product",
					view: "json",
				},
				dataType: "json",
				success: function( data ) {
					if (data.length) {
						cache[request.term] = data;
					}
					if (data.length > 6) {
						$('.ui-autocomplete').show();
					} else {
						$('.ui-autocomplete').hide();
					}
					response(data);
				}
			});
		},
		minLength: 2,
		focus: function(event, ui) {
			$('div.autoprod').removeClass('ui-state-focus');
			$('#autoprod' + ui.item.id).addClass('ui-state-focus');
		},
		select: function( event, ui ) {
			window.location = ui.item.url;
		},
	}).data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
		var elemHTML = '<a href="' + item.url +'"><div id="autoprod' + item.id +'" class="autoprod ui-corner-all"><div class="autotext"><span class="autotitle">' + item.label + '</span></div><div class="clear" style="display:inline" /></div></a>';
		return $( '<li class="ui-menu-item" role="presentation">' )
			.append( elemHTML )
			.appendTo( ul );
	};

});