Customized Popup?

[brock1958]

I want to custom the pop that comes up from the keystrokes to show what category the results items are from. For example I have items from the Users model and the Groups model. I would like to display a category header ("User") and list the users and then under that another category header ("Groups") and then list the group result items. Also, when any item is picked I would like to invoked a search request right away instead of loading the results into the text field and the user having to pick a submit button. I hope I am explaining this in an understandable way. 

[brock1958]

I have gotten further by implementing the suggestions for the "Label Formats on the Client Side" from the details here:

http://django-selectable.readthedocs.org/en/latest/advanced.html#advanced-label-formats

Now I am on this step to customize the Javascript:

<script type="text/javascript">
    $(document).ready(function() {
        function formatLabel(label, item) {
            var data = label.split(',');
            return '<span class="city">' + data[0] + '</span>, <span class="state">' + data[1] + '</span>';
        }
        $('#id_city_0').djselectable('option', 'formatLabel', formatLabel);
    });
</script>

But I am not sure how to customize the '#id_city_0' part of the line:  $('#id_city_0').djselectable('option', 'formatLabel', formatLabel);

How do I determine what "id_city_0" is for me? I am trying to use the Javascript debugger and looking into the jquery.dj.selectable.js source code.

[Mark Lavin]

Sorry I missed the original email somehow but header/category support is possible with jQuery UI autocomplete (http://jqueryui.com/autocomplete/#categories) but there is no built-in support for it in django-selectable (See https://github.com/mlavin/django-selectable/issues/77)

As for the field selector the id_ prefix and _0 suffix are added by Django. The middle part (i.e. city) will match the name of your field as it is declared on the form. 

--
You received this message because you are subscribed to the Google Groups "django-selectable" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-selecta...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[brock1958]

Thanks for the information!

I did get further with the information about the field selector. I could only get things to work with a AutoComboboxSelectWidget (like the "Advanced" example and not a selectable.AutoCompleteWidget even though I matched the selector to the field selector that I declared on the form (via forms.py).

I did get the client-side Javascript formatLabel function working as well and can tweak the popup formatting since I can determine the category of the item via a hint I added to the label. But now I am struggling with the pick event when an item is picked in the popup. I want to perform a search right away instead of loading the item in the input field. I have tried the following but it doesn't seem to work:

    $(document).ready(function() {

        function formatLabel(label, item) {

            return '<a class="userorgroup-autocomplete" href="http://google.com"><span class="some_class">' + label + '</span></a>';

        }

        $('#id_city_0').djselectable('option', 'formatLabel', formatLabel);

    });

    $('.userorgroup-autocomplete').click(function(event) {

        var url = $(this).attr('href');

    });

Thanks!

[brock1958]

I was able to get this figured out. I needed to unbind some of the JQuery event handlers and add my own:

    $(document).ready(function() {

        function formatLabel(label, item) {

            var url = "http://yahoo.com/";

            return '<a class="userorgroup-autocomp" href="' + url + '">><span class="zoo">' + label + '</span></a>';

        }

        $('#id_city_0').djselectable('option', 'formatLabel', formatLabel);

        $('ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all').unbind("mousedown");

        $('ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all').unbind("click");

    });

    $('ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all').click(function(event) {