Games ~ Game Name Autocompletion

Overview

The search bar in the navigation bar has two parts, the dropdown menu to select what kind of Django models the query is for and the text input field. The dropdown menu has an id of "query-type" and the text input field has an id of "query-input". By default, the "Games" option of "query-type" is selected. When the "Games" option is selected, the text input field will autocomplete to game names.

Getting Game Names

In order to get a list of all of the games, we defined a new custom template tag called get_games in src/chigame/games/templatetags/tags.py. This tag returns a list of all Game objects stored in the database. Then, for each Game object in the list, a dictionary is added to the variable game_names. In each dictionary, the key "url" is mapped to the URL of the game's detail page and the key "label" is mapped to the game's name as a string.

jQuery UI Autocomplete

In order to implement autocompletion, we have used the autocomplete widget provided by jQuery UI. The documentation can be found here: jQuery UI Autocomplete. The source attribute is a function that takes request and a response as arguments. Next, the function creates a new regular expression object (RegExp) to perform a case-insensitive search for request.term. request.term is the string that is entered into "query-input" (the text input field). Then, we set the variable results to be all of the items in game_names whose name matches the string entered into "query-input". Finally, we limit the number of matches to 10 (the current value of AUTOCOMPLETION_RESULTS_LIMIT) and pass those 10 to the response variable.

Clicking On Tag Redirects to Game Detail Page

The select attribute allows us to set the action that occurs when an autocomplete tag is clicked on. We have implemented a function that redirects the user to the Game's detail page when the autocompletion tag is clicked on.