Package: django-typeahead
Django thin wrapper for Twitter’sTypeahead.jslibrary.GoalThe goal of this package is to seamlessly integrate Typeahead.js with Django and other django libraries.DocumentationThe full documentation is athttps://django-typeahead.readthedocs.io/RequirementsPython >= 3.4Django >= 2.0jquery >= 1.9InstallationInstall using pip:pip installdjango-typeaheadAddbootstrap_typeaheadto the list ofINSTALLED_APPSin yoursettings.pyfile:INSTALLED_APPS=[# ...'bootstrap_typeahead',]This installation instruction assumes you have jQuery already present in your page.ExampleThis sample section translates thefirst example (basics)sample from Typeahead.jsexamples page.forms.pyThe input widgetTypeaheadInputwould be used as a widget in Django forms.fromdjangoimportformsfrombootstrap_typeahead.widgetsimportTypeaheadInputclassStateForm(forms.Form):query=forms.CharField(widget=TypeaheadInput(options={'hint':True,'highlight':True,'minLength':1},datasets={'name':'states','source':'substringMatcher(states)',}))Theoptionsanddatasetsargument will be passed to the JavaScript typeahead instance,
and are documented and demonstrated here:Typeahead DocumentationBloodhound DocumentationInteractive Demotemplate.htmlThe initialization of suggestions list should be added to the page - in this case we are using snippet frombasic examplefrom Typeahead.js demo page.{%loadbootstrap4%}{# Load CSS and JavaScript #}{%bootstrap_css%}{%blockextra_css%}{{form.media.css}}{%endblock%}<form method="post" role="form">{%csrf_token%}{%bootstrap_formform%}<div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
      </div>
    </form>{%bootstrap_javascriptjquery='full'%}{%blockextra_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 usedjango-bootstrap4but you can create your HTML forms manually.LicenseYou can use this under MIT License. SeeLICENSEfile for details.Bugs and SuggestionsIf 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