Smarter Selection Using AutoComplete

When building an application that requires a select action from the user, you have several options.  You can either add a checkbox, drop down, radio, list box, and (as of 2004( an input box with Autocomplete.  Thanks to Kevin Gibbs, the Autocomplete was developed for Google.  The function quickly became a heavily used Google function, offering the famous suggestion options.

 

How I implemented AutoComplete

In one of my web applications, BodyVal, I previously used a dropdown list for users to select an activity.  This is what that dropdown looks like.  As my application scales by number of exercises and activities, this list will only get larger.

This also forced me to require users to use a two part form.  One form to pick how you want to evaluate your activity, and finally a redirection to the screen I actually seen by my users.

My Solution to this problem was an autocomplete.  The Search box allows my users to pick their activity and how they intend to score against that in a search bar.  Best of all, this directs them right to the form I want my users to be directed to.  I hope that this simplifies the user experience.

Your Use of AutoComplete

There are several ways to implement autocomplete, but the basic ingredients require

1. An http route you’ll use to get query results
2. A Controller, or function that makes a Query to your data source.
3. A View that contains HTML to render your input box.
4. Finally, Javascript that makes an ajax call to the controller that queries your data source.

How can you build your own Autocomplete Functions?

I will show you how I have implemented auto-complete within my current MVC framework of choice, Laravel. My goal is to try to keep the context of the article general enough to also help you implement one within other frameworks.

View

<div class="row">
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <form action="/activity/create" method="POST">
               <input id="q" class="form-control" title="" name="activity" type="text" placeholder="Find Your Activity" />
          </form>
     </div>
</div>

Javascript

<script>//Javascript
$(function() {
     $( "#q" ).autocomplete({
          source: "/activity/autocomplete/",
          minLength: 3,
          select: function(event, ui) {
               $(this).val(ui.item.value);
               $(this).parents("form").submit(); // this will submit the form.
          }
     });
});
</script>

Route

Route::get('activity/autocomplete/', 'AjaxController@searchActivity');

Controller

public function searchActivity(){
     $term = '%'. Input::get('term') .'%';
     $results = array();

     $queries = collect(DB::select( DB::raw("
          SELECT distinct a.id as id, a.name as activity, a.abbr as abbr, a.type
               from activities a
                    where concat(a.name, ' - ',abbr, ' - ', a.type) like :term
               order by activity, abbr "),
     array('term' => $term )));

     foreach ($queries as $query){
          $results[] = [ 'id' => $query->id, 'value' => $query->activity.' - '.$query->abbr . ' - ' . $query->type ];
     }

     return Response::json($results);
}

I Hope This Helped!

I hope this article helped you better understand how to use an autocomplete box and that my implementation of one helped you develop one of your own.  Good luck on your project!