I have implemented a chatbot based on this tutorial (https://github.com/vaisaghvt/django-bot-server-tutorial/tree/websockets). I would like to implement an autocomplete functionality, so that as I type, options are displayed.

An example usage is the bot asking the user "What city do you live in?". I should be able to type "Be" and the bot suggests "Berlin". I'm following the autocomplete-light tutorial. I'm finding it hard to figure out how to implement the feature on my html for the chatbot functionality.

What have I done so far:

Implemented a simple model autocomplete model

from dal import autocomplete

from your_countries_app.models import Country


class CountryAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):

        qs = Country.objects.all()

        if self.q:
            qs = qs.filter(name__istartswith=self.q)

        return qs

Registered an autocomplete view

from your_countries_app.views import CountryAutocomplete

urlpatterns = [
    url(
        r'^country-autocomplete/$',
        CountryAutocomplete.as_view(),
        name='country-autocomplete',
    ),
]

This is the html code for my chatbot message box.

        <div class="navbar navbar-default navbar-fixed-bottom non-error">
            <div class="container-fluid botAccentColor" id="bottom-box">

                <div class="row" id="send-box">

                    <div id="messageToSend" contenteditable="true" class="pull-left" data-ph="Type your message..."></div>


                    <div class="pull-right send-button-div">
                        <button  id="messageSendButton" type="button" onclick="sendTextMessage(counter())">
                            <i class="fa fa-paper-plane" aria-hidden="true"></i>
                        </button>  
                    </div>

                </div>

            </div>

        </div>

What could be done? Could I possibly modify the following code to select attribute 'data-ph' and instigate the widget?

autocomplete.ModelSelect2(
    url='select2_fk',
    attrs={
        # Set some placeholder
        'data-placeholder': 'Autocomplete ...',
        # Only trigger autocompletion after 3 characters have been typed
        'data-minimum-input-length': 3,
    },
)

0 Answers