Creating a jQuery Django Autocomplete Widget Tutorial

Creating a jQuery Django Autocomplete Widget Tutorial

Django Autocomplete Widget - Title
Complete Tutorial - 6 Minutes

Why use a jQuery Django Autocomplete Widget?

The jQuery Django Autocomplete Widget is useful whenever you’re wanting to direct traffic throughout your site while making your user think they’re still in complete control. Take for example google. Whenever you begin typing a query, it is often modified slightly by the google autocomplete recommendation feature without a second thought from the user. The user just clicks the recommended autocompleted phrase and is directed to -likely – their desired query results.  

This is a way for google to filter traffic that would otherwise use other keywords back to the most commonly used keywords. The more times a keyword is searched, the more valuable that keyword is, and thus the higher price google can get for ads on that keyword. Additionally, it gives a better chance of providing the user with the experience they’re wanting. 

jQuery’s autocomplete feature is not a machine learning autocomplete as google’s is. However, the idea is the same. The creator of the website, you, can try to optimize the user experience by using an autocomplete feature on text input fields. 

jQuery Django Autocomplete Widget - Example
Example of an jQuery Django Autocomplete Widget

See an Example of a jQuery Django Autocomplete Widget

With all my widget tutorials, I think it’s important to know what you’re building before you spend your time creating it on your website. The above shows an example of the widget we’ll be creating in this tutorial. It’s just a screenshot, but if you want to see and use the working example of this widget, you can find it on my Heroku hosted Django website. You can find it at this link.

How to start with jQuery Widgets

jQuery is just a tool to make it easier to impliment Javascript into your django websites (or any type of website that supports Javascript for that matter). 

If you want to use Javascript to begin creating dynami content on your website, jQuery makes the process much easier to get started.

First, we need the source code for the jQuery Django Autocomplete Widget

To get the source code for the Autocomplete widget, we’ll need to head to jQuery’s website. You can either google search it or just follow this link. Or you can just grab the source code from below:

<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel=“stylesheet” href=“/resources/demos/style.css”>
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"Tag1",
“Tag2”
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
There’s multiple different functionalities available, but I’m just going to use the default one for the purposes of this tutorial. The first section is just the styling that jQuery gives by default, the actual Javascript elements are in the script source lines in the second section
Using the Autocomplete JavaScript to create a Django Autocomplete Widget

Depending on the size of your project, I would most likely encourage you to create a base.html file and extend it to other templates in your Django project. This is how I’ve created the working live example website for all the tutorials on jQuery widgets.

In this scenario, play the above styling and scripts into your base.html file. If you’re only working off one file, then go ahead and place it into that file. 

To start using the jQuery Django Autocomplete Widget, you need to designate a div  and label for input like the following:

<div class=”ui-widget”>
<label for=”tags”>Tags: </label>
<input id=”tags”>
</div>

Notice above we named the available tags by leaving the default

( “#tags”   )

If you’re working with several input fields, each with their own set of potential autocomplete fields, you can create multiple lists and assign them different variable names. Then designate this variable name on the input field in your html file. 

Now, whenever a user begins typing something into the field on your website, it will auto populate the tags that include the same combination of letters that the user currently has typed into the field. 

Full code from my jQuery Django Autocomplete Widget Live Example

I got a little carried away on the motivational encouragement on my working example, but I wanted to make sure I covered every letter. If you’re interested in my live example code, here it is:

{% extends “base.html” %}
{% load staticfiles %}

{% block content %}
<script>
$( function() {
var availableTags = [
“Derrick”,
“www.derricksherrill.com”,
“Python”,
“Django”,
“Python”,
“Ruby on Rails”,
“A great Tag”,
“Be Great Today”,
“Complete your goals”,
“Dare to Achieve”,
“Excellence is Earned”,
“Fear nothing but stopping”,
“Great things are ahead”,
“Have hope in your goals”,
“I know you’ll be successful”,
“Just keep going”,
“Keep Grinding”,
“Love each other”,
“Make the most of your time”,
“No one can stop you but you.”,
“Optimize your happiness”,
“Plan for success, prepare for failure”,
“Quiet down the nay sayers”,
“Respect the code”,
“Stay Hungry”,
“Teach others”,
“Unique experiences are rememberable”,
“Very excited for you to learn Django”,
“Welcome to my site!!”,
“X lol”,
“You’re awesome”,
“Zesty Chicken Parm”
];
$( “#tags” ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>

<div class=”ui-widget”>
<label for=”tags”>Tags: </label>
<input id=”tags”>
</div>

{% endblock %}

Quick Review:

  • You can include any number of tags that will autocomplete into the field once the user begins typing. 
  • This does still allow the use to input fields which are not tags you have specified into the input field. 

But that’s pretty much it whenever it comes to creating your own jQuery Django Autocomplete Widget in your Django project. If this was your first jQuery tutorial, I totally recommend checking out some of my other tutorials. There’s some awesome widgets that you can create with simple jQuery applications. 

Additionally, jQuery is a great stepping stone to learning full JavaScript. One of the most profitable and useful coding languages to learn. 

Enjoy the Content? Join the Django Development Newsletter!
Other jQuery Django Widget Tutorials:

Leave a Reply

Your email address will not be published. Required fields are marked *