Ajax autocomplete limit results and show link

[georgetour]

Hi everybody,
I have this piece of code and I want to show max 5 results and when 5 or more results are shown to have a link that will show the page with all results. I thought something with slice but I don’t know where to implement it and about the link I don;t know at all.

<input type="text" class="input-block-level search-query" name="search2" placeholder="" id="search_query2" value="" />
<i aria-hidden="true" class="icon_close"></i>
<div id="autocomplete-results2" class="autocomplete-results"></div>
	
<script type="text/javascript">
	$(document).ready(function() {
		$('#search_query2').autocomplete({
			delay: 0,
			appendTo: "#autocomplete-results2",
			source: function(request, response) {

				$.ajax({
					url: 'index.php?route=search/autocomplete&filter_name=' +  encodeURIComponent(request.term),
					dataType: 'json',
					success: function(json) {
						response($.map(json, function(item) {
							return {
								label: item.name,
								value: item.product_id,
								href: item.href,
								thumb: item.thumb,
								desc: item.desc,
								price: item.price
							}
						}));
					}
				});
			},

			select: function(event, ui) {
				document.location.href = ui.item.href;
				return false;
			},
			focus: function(event, ui) {
		      	return false;
		   	},
		   	minLength: 2
		})
		.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
		  return $( "<li class='ajaxItem' >" )
		    .append( "<a style='cursor:pointer;'><img src='" + item.thumb + "' alt=''></br>" + item.label + "<br><span class='description'>" + '' + "</span><span class='price'>" + item.price + "</span></a>" )
		    .appendTo( ul );
		};
	});

</script>

Thank you

[m3g4p0p]

@georgetour

I thought something with slice

Yes – and if that json response is just a regular array, you can actually use the native .map() method too:

// ...
success: function (json) {
  var result = json
    .slice(0, 5)
    .map(function (item) {
      return {
        label: item.name,
        value: item.product_id,
        href: item.href,
        thumb: item.thumb,
        desc: item.desc,
        price: item.price
      }
    })
    
  response(result)
}

As for the link… well, you could just check the length of the json array within the success callback, and create (or update) a link accordingly. But you’d of course need a dedicated page then, which would be more of a backend task. Or would that just be a link to the naked JSON response?

[georgetour]

Thank you sir it works!!! As for the link my senior told me i should have something like domain + index.php?route=product/search&search= + the_ajax_search

[georgetour]

But I don’t understand exactly how and what to add. Thank you

[m3g4p0p]

Ok so the page to display the full search results already exists, and you just need to display a link? Then you just need an anchor tag, which you’d reference like

var $resultLink = $('#id-of-that-link')

and inside the success callback something like

var url = 'index.php?route=product/search&search=' + encodeURIComponent(request.term)

if (json.length > 5) {
  $resultLink.prop('href', url).show()
} else {
  $resultLink.hide()
}

You might have to create and append the link first if you don’t have access to the markup, but that would be the basic idea.