Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

AutoComplete with SilverStripe – how to?


Reply


5 Posts   1942 Views

Avatar
joelg

Community Member, 129 Posts

28 December 2010 at 9:40pm

Hi SilverStripe Forums

I have a rather huge site with about 700 pages filled with information about wines from Italy: [url=http://www.italienskvinguide.dk/]Italiensk Vinguide[/url]

I have a search form on all pages and I've been tracking the keywords typed in by the visitors. This data tells me that many people are doing lot's of spelling mistakes and typos – and this naturally turns into poor search results hence loss of visitors and bad experiences.

A way to solve this would be an autocomplete service and I could e.g. use the jQuery autocomplete plugin for this. Now, how would I accomplish this? And is this the best way to solve such a problem?

Any suggestions would be appreciated.

Thanks.

Joel

Avatar
Martijn

Community Member, 271 Posts

28 December 2010 at 10:29pm

I use this for a webshop form:

Controller:

function productajaxsearch(){
      if(isset($this->request) && $term = $this->request->getVar('term')){
         $where = "Title LIKE '%" . (string)$term . "%' OR SubTitle LIKE '%" . (string)$term . "%' OR Content LIKE '%" . (string)$term . "%'";
         if($products = DataObject::get('Product', $where)){
            $return_arr = array();
            foreach($products as $p){
               $array['link'] = $p->Link();
               $array['title'] = $p->Title;
               $array['image'] = '<img src="'.$p->Image()->SetWidth(50)->Link().'" />';
               array_push($return_arr,$array);
            }
            return json_encode($return_arr);
         }
      }
   }

jQuery autocomplete code:

var div = document.getElementById('SearchForm_ProductSearchForm_Search');
   if (div !== null){
      var cache = {};
      $( "#SearchForm_ProductSearchForm_Search" ).autocomplete({
         minLength: 2,
         source: function(request, response) {
            if ( request.term in cache ) {
               response( cache[ request.term ] );
               return;
            }
            $.ajax({
               url: "Page_Controller/productajaxsearch",
               dataType: "json",
               data: request,
               success: function( data ) {
                  cache[ request.term ] = data;
                  response( data );
               }
            });
         }
      }).data( "autocomplete" )._renderItem = function( ul, item ) {
         return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( '<div class="searchitem">' + item.image + '<div class="searchtitle"><a href="'+item.link+'">' + item.title + '</a></div><div class="clear"></div></div>' )
            .appendTo( ul );
      };
   }

Avatar
biapar

Forum Moderator, 435 Posts

30 December 2010 at 10:57pm

Good Tips

Avatar
joelg

Community Member, 129 Posts

30 December 2010 at 11:00pm

Hi Martijn

So many thanks for the hint. This is awesome.

If I do this will it then slower the database? What is your opinion on this?

Thanks

Joel

Avatar
joelg

Community Member, 129 Posts

2 January 2011 at 10:11am

Edited: 03/01/2011 11:47pm

Hi

The autocomplete feature is now working at our site: [url]http://www.italienskvinguide.dk[/url]

@Martijn – can you post a link to the webshop, you are talking about? I'm curious to SilverStripe in action as a webshop.

Joel