django-autocomplete-light how I can show selected value in initial input widget after selected? like in jquery-ui

Question

After I've selected some value it removes initial input ...

How I can do like in jQuery UI example?

$("input#autocomplete").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
    select: function(e, ui){

        // comment out this line to see the difference
        $('#autocomplete').val(ui.item.value);

        $('#result').html( $('#autocomplete').val() );

    }
});

http://jsfiddle.net/Mottie/SmycH/

Answer 1

https://jqueryui.com/download/ (select core, mouse and autocomplete widget)

Link statics to your project and use this widget ...

credits to @hedleyroos https://github.com/praekelt/django-simple-autocomplete

class AutoCompleteWidget(Select):
    input_type = 'autocomplete'
    url = None
    initial_display = None
    token = None
    model = None

    def __init__(self, url=None, placeholder=None, initial_display=None, token=None,
                 model=None, *args, **kwargs):
        """
        url: a custom URL that returns JSON with format [(value, label),(value,
        label),...].

        initial_display: if url is provided then initial_display is the initial
        content of the autocomplete box, eg. "John Smith".

        token: an identifier to retrieve a cached queryset. Used internally.

        model: the model that the queryset objects are instances of. Used
        internally.
        """
        self.url = url
        self.placeholder = placeholder
        self.initial_display = initial_display
        self.token = token
        self.model = model
        super(AutoCompleteWidget, self).__init__(*args, **kwargs)

    def render(self, name, value, attrs=None, choices=()):
        if value is None:
            value = ''

        url = self.url
        display = self.initial_display or ''
        placeholder = self.placeholder or ''

        html = u"""
        <script type="text/javascript">
        $(document).ready(function(){

        $("#id_%(name)s_helper").autocomplete({
            source: function(request, response){
                $.ajax({
                    url: "%(url)s",
                    data: {q: request.term},
                    success: function(data) {
                        if (data != 'CACHE_MISS')
                        {
                            response($.map(data, function(item) {
                                return {
                                    label: item[1],
                                    value: item[1],
                                    real_value: item[0]
                                };
                            }));
                        }
                    },
                    dataType: "json"
                });
            },
            select: function(event, ui) { $('#id_%(name)s').val(ui.item.real_value); },
            minLength: 3
        });

        });
        </script>

        <input class="textinput textInput form-control" id="id_%(name)s_helper" type="text" placeholder="%(placeholder)s" value="%(display)s" />
        <input name="%(name)s" id="id_%(name)s" type="hidden" value="%(value)s" />""" % dict(
            name=name,
            url=url,
            display=display,
            value=value,
            placeholder=placeholder,
        )

        return mark_safe(html)