Skip to main content
Donate to the Python Software Foundation or Purchase a PyCharm License to Benefit the PSF! Donate Now

Django app to add Typeahead.js based input elements.

Project description

Continuous Integration Test Coverage Latest PyPI version

Django thin wrapper for Twitter’s Typeahead.js library.

Goal

The goal of this package is to seamlessly integrate Typeahead.js with Django and other django libraries.

Documentation

The full documentation is at https://django-typeahead.readthedocs.io/

Requirements

  • Python >= 3.4
  • Django >= 2.0
  • jquery >= 1.9

Installation

  1. Install using pip:

    pip install django-typeahead

  2. Add bootstrap_typeahead to the list of INSTALLED_APPS in your settings.py file:

INSTALLED_APPS = [
    # ...
    'bootstrap_typeahead',
]

This installation instruction assumes you have jQuery already present in your page.

Example

This sample section translates the first example (basics) sample from Typeahead.js examples page.

forms.py

The input widget TypeaheadInput would be used as a widget in Django forms.

from django import forms
from bootstrap_typeahead.widgets import TypeaheadInput

class StateForm(forms.Form):
    query = forms.CharField(
        widget=TypeaheadInput(
            options={
              'hint': True,
              'highlight': True,
              'minLength': 1
            },
            datasets={
              'name': 'states',
              'source': 'substringMatcher(states)',
            }
        )
    )

The options and datasets argument will be passed to the JavaScript typeahead instance, and are documented and demonstrated here:

template.html

The initialization of suggestions list should be added to the page - in this case we are using snippet from basic example from Typeahead.js demo page.

{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}

{% block extra_css %}
{{ form.media.css }}
{% endblock %}

    <form method="post" role="form">
    {% csrf_token %}
    {% bootstrap_form form %}
      <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
      </div>
    </form>

{% bootstrap_javascript jquery='full' %}

{% block extra_js %}
    <script type="text/javascript">
    var substringMatcher = function(strs) {
      return function findMatches(q, cb) {
        var matches, substringRegex;

        // an array that will be populated with substring matches
        matches = [];

        // regex used to determine if a string contains the substring `q`
        substrRegex = new RegExp(q, 'i');

        // iterate through the pool of strings and for any string that
        // contains the substring `q`, add it to the `matches` array
        $.each(strs, function(i, str) {
          if (substrRegex.test(str)) {
            matches.push(str);
          }
        });

        cb(matches);
      };
    };

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
      'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
      'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
      'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
      'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
      'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
      'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
      'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
      'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
    ];
    </script>
    {{ form.media.js }}

{% endblock %}

Here we use django-bootstrap4 but you can create your HTML forms manually.

License

You can use this under MIT License. See LICENSE file for details.

Bugs and Suggestions

If you have found a bug or if you have a request for additional functionality, please use the issue tracker on GitHub.

https://github.com/xvronny/django-typeahead/issues

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
django-typeahead-1.0.1.tar.gz (8.8 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page