Jump to:

22970 Posts in 11572 Topics by 2823 members

General Questions

SilverStripe Forums » General Questions » AutoComplete with SilverStripe – how to?

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

Page: 1
Go to End
Author Topic: 1811 Views
  • joelg
    Avatar
    Community Member
    129 Posts

    AutoComplete with SilverStripe – how to? Link to this post

    Hi SilverStripe Forums

    I have a rather huge site with about 700 pages filled with information about wines from Italy: Italiensk Vinguide

    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

  • Martijn
    Avatar
    Community Member
    271 Posts

    Re: AutoComplete with SilverStripe – how to? Link to this post

    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 );
          };
       }

  • biapar
    Avatar
    Forum Moderator
    435 Posts

    Re: AutoComplete with SilverStripe – how to? Link to this post

    Good Tips

  • joelg
    Avatar
    Community Member
    129 Posts

    Re: AutoComplete with SilverStripe – how to? Link to this post

    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

  • joelg
    Avatar
    Community Member
    129 Posts

    Re: AutoComplete with SilverStripe – how to? Link to this post

    Hi

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

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

    Joel

    1811 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.