django-autocomplete-light如何在选中后在初始输入窗口小部件中显示所选值？就像在jquery-ui

Question

在我选择了某个值后，它会删除初始输入...

我在jQuery UI示例中的表现如何？

$("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/（选择核心，鼠标和自动完成小部件）

将静态链接到您的项目并使用此小部件......

致@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)