Tools and widgets for using/creating auto-complete selection widgets using Django and jQuery UI.
Home Page: http://django-selectable.readthedocs.io/en/latest/
License: BSD 2-Clause "Simplified" License
I had a problem getting an autocomplete input for a many to many field. (I didn't want to allow multiple selection, as the UI would have been too complicated). The problem is that the m2m manager expects to get a list, while AutoCompleteSelectField returns a single item. So here's the class I made:
#!python
class AutoCompleteSelectManyToManyField(AutoCompleteSelectField):
def to_python(self, value):
single_value = AutoCompleteSelectField.to_python(self, value)
return [single_value,]
http://django-selectable.readthedocs.org/en/latest/lookups.html#defining-a-lookup
given:
from selectable.base import BaseLookup
should be:
from selectable.base import LookupBase
given:
class MyLookup(BaseLookup):
should be:
class MyLookup(LookupBase):
jQuery 1.6 introduced a backwards incompatible change with accessing data-* elements: http://blog.jquery.com/2011/05/03/jquery-16-released/
Maybe it's something I'm not doing right, but just followed the instructions in the docs.
When trying to hook up this in the admin. the widget wasn't picking up correctly the url to fetch data: Instead of posting to /selectable/<lookup_name>/?, it was posting to the same url of the current view. Digging a little, I notice that this line (47) in jquery.dj.selectable.js was failing to populate the attributes:
#!javascript
var data = $(input).data();
So when I added:
#!javascript
data['selectable-allow-new'] = $(input).attr('data-selectable-allow-new');
data['selectable-multiple'] = $(input).attr('data-selectable-multiple');
data['selectable-url'] = $(input).attr('data-selectable-url');
data['selectable-type'] = $(input).attr('data-selectable-type');
it worked.
I'm using the 54:18f280d4c709 revision
Need to watch this issue: https://code.djangoproject.com/ticket/16776
Django 1.4 is currently set to remove jQuery.noConflict(true); which could impact how this app will work in the admin.
It's really clunky right now and it could use a lot of work as well as better examples.
It would be interesting to see lookups backed by Haystack searches rather than hitting the Django DB.
That would be great If I could have scrollable list instaed of clicking "show more results".
Thanks
Hello,
I have found I needed a variant of AutoCompleteWidget that worked as a textarea (as I needed two lines of text). I took a stab at it and here's what I have done. It's almost a copy of AutoCompleteWidget, something can probably be factored out but I am just beginning with python and this just works for me. Maybe it can be integrated in case it is useful for others.
#!python
class TextareaAutoCompleteWidget(forms.Textarea, SelectableMediaMixin):
def __init__(self, lookup_class, *args, **kwargs):
self.lookup_class = lookup_class
self.allow_new = kwargs.pop('allow_new', False)
self.qs = {}
super(TextareaAutoCompleteWidget, self).__init__(*args, **kwargs)
def update_query_parameters(self, qs_dict):
self.qs.update(qs_dict)
def build_attrs(self, extra_attrs=None, **kwargs):
attrs = super(TextareaAutoCompleteWidget, self).build_attrs(extra_attrs, **kwargs)
url = self.lookup_class.url()
if self.qs:
url = '%s?%s' % (url, urlencode(self.qs))
attrs[u'data-selectable-url'] = url
attrs[u'data-selectable-type'] = 'text'
attrs[u'data-selectable-allow-new'] = str(self.allow_new).lower()
return attrs
I ultimately need to use chained selection, but was trying to get things working with something simpler and tried autocompleteselect. I have a little test model class 'Cattest'. It has a field 'category', that i want to fill from the model class category. The plan being that when I render the template for 'Cattest' it would include a selectable autocompleteselectfield for the 'category' field.
I can get my form.html to load rendering the CattestForm model, but the autocompleteselectfield is not working. I am kind of new to intergrating multiple apps and using jquery, so I expect I am missing something really simple.
Your docs are much better than most, but I would like to have had a more robust example to follow. Thanks in advance for your help. I will attach a file with code snippets.
I am trying to create a search form which searches for model records.
I want to avoid subclassing forms.ModelForm as I don't need all methods..
#!python
class SomeModel(models.Model):
data = models.Foreignkey(Data)
place = models.ForeignKey(Place)
There are ~1000 places so I decided to use django-selectable for Place select widget.
#!python
class SearchForm(forms.Form):
place = selectable.AutoComboboxSelectField(
lookup_class=PlaceLookup,
label = _(u'Somelabel'),
required=False,
)
data = forms.ModelChoiceField(...)
my lookups.py
#!python
class PlaceLookup(ModelLookup):
model = Place
search_fields = ('name__icontains',)
there's also a search() method in my SearchForm class which creates a django Q() instance that I use for queryset filter in my views.py (if form is valid)
The problem is that I get place_0 & place_1 in my url queryset so it's not working. The desired functionality would be &place=23 (Place.id)
What is the best way (if any) for doing such search ?
Thanks
Add an example of using the additional request parameter api (http://django-selectable.readthedocs.org/en/latest/parameters.html) to do a chained state/city selection.
Suggest adding a header identifying the source to all files, e.g. *.js and *.css especially since they might get copied elsewhere if someone is not using staticfiles. It would help identify where the files came from later.
Not sure if this is considered a bug, but I noticed to my confusion that the version on pypi, and hence pip install django-selectable is still 0.1.2 and not 0.2.0.
Do you suggest waiting till it's updating or using a -g to the bitbucket source if I want to have the most recent stable?
When you like to save in Django admin a new entry and not all required fields are filled out, you have to reenter text in an AutoCompleteSelectField, or at least remove the last letter to rerun lookup.
Currently the multi-select builds a list of items below the text input but it might be nice to have them above or in-line (like multiple tags).
For those who might want to help out.
When the autocompletion options shows, the items have a square bullet in front. Maybe this is caused by using incorrect jQuery UI CSS, but I downloaded a custom copy of it, that only includes the Autocomplete component.
I'm using the 54:18f280d4c709 revision
quick-start.rst references the wrong lines in lookup.py. It cuts off the class FruitLookup and skips over the registering of the class.
Add documentation/examples of using the widgets in the admin for various uses.
When using the AutoCompleteWidget (data comes from table through a foreign key-field) i just want to store the ID that represents what the User has chosen. I know i can "re-lookup" the string from the data-field on the form, but that makes me access the database one time too many + imagine if the result in de AutoCompleteWidget is not unique (ex. a combination FirstName + LastName), i can't re-lookup what the User has selected...)
I assume the AutoCompleteWidget is created to store the actual string of the value, but for a App with a good database structure, i work with foreign keys a lot... so the ID of the chosen record is what i'm really interested in.
Is there anything 'out of the box' for what i want to do here?
Pieter
Related to #31. Look for better work around for using django-selectable with django-dynamic-formset.
Here are two points to add to the documentation:
Hello guys, thanks for the great app! Has been helping me a lot! Here's a scenario I couldn't think of a nice solution.
Problem is the following, I've got 10 fields that I want to be autocompleted and they're all the same logic. The user just types in a string, if he clicks save and it doesn't exist, it gets created. It's pretty much like the autocomplete our browsers have.
As they all have the same logic, I have a simple model for storing the autocomplete strings. Basically it stores a key (cellphone_number, email, etc) and it's value. So if I have the fields cellphone number, email, name, etc I'd have to have one class for each of these lookups, which is not optimal. As in the future I might have more fields, I wouldn't like to have 15 classes that do the same thing and only change the "key". I'm not sure if I explained it well enough. If you guys have any doubts, please ask!
It'd be sweet if I could create a new base class for these kinds of lookups and then I could just instantiate with the key. Something in the lines of:
#!python
email = forms.CharField( widget=selectable.AutoCompleteWidget(MySweetCustomLookup(key="email"))
Any idea if this is possible? MANY THANKS IN ADVANCE!
Currently AutoCompleteSelectWidget and AutoComboboxSelectWidget do not play nice with other fields (like ModelChoiceField) because they return a list [text, pk] rather than just the pk. Part of this is because of the ability to add new items which is handled by the field. Perhaps support for adding items could be dropped if something along the lines of #30 was implemented.
The widgets don't contain links to form media (dj.selectable.css and jquery.dj.selectable.js files). I solved the problem by manually including the files into my html template. A better solution is if the two files are defined where the widgets are defined in class media.
cheers
I am sorry if this has already been applied by I am trying to use AutoComboboxSelectField in my django forms.ModelForm
If I choose to only change the widget, 2 values are being posted to the server (probably because of __unicode__representation).
Problem disappears If I override the field instead of widget but I can't get the field label from models it selects..
Is there any way so I can get the label from models.py of the specified form field ?
Thanks
MEDIA_PREFIX}}} is incorrect is {{{STATIC_URL}}} is not set. Fix should be backported.
{{{MEDIA_PREFIX
There is a nice plugin for multiple selects with jQuery and jQuery UI:
https://github.com/ehynds/jquery-ui-multiselect-widget
Seems like it wouldn't be too hard to integrate with this project and the license is compatible.
Import * executes the lookup registration code and can lead to AlreadyRegistered errors.
Once the example project is improved in #47 we should setup a live site. ep.io or dotcloud have a free tier where it could easily be hosted.
Currently you can only add additional query parameters via the update_query_parameters method. You should be able to pass them in the widget __init__ as well.
Hello,
I've searched the issues and the docs and found no documentation about selectable only working if the user is logged in. I would like to suggest a new parameter must_be_authenticated (default: false)?
Here's how I've done it so far, would this be the recommended path or is there an easier way to protect a particular lookup?
#!python
def results(self, request):
if self.must_be_authenticated and request.user.is_authenticated():
return super(ModelLookup, self).results(request)
else:
return HttpResponseForbidden()
When modifying an entry using AutoComboboxSelectField, I am unable to update this entry, except when I loose focus from the select field by clicking somewhere else on the page before submitting the form.
I am no JavaScript guru, so I don't know where to look at the js code to solve the issue, but it seems that there should be somewhere an update of the form values after choosing a new value.
Having an issue when using django-selectable for manytomany field in Django admin.
When I go to the a selectable-controlled input box, it is initially blank. If I focus on the box and press enter, the first manytomany item that's already been added previously gets deleted. If I then save the item is lost for good!
Using an AutoCompleteSelectMultipleField, clicking the X button in the selectable-deck-remove div is causing all the existing items, plus the autocomplete input widget, to be removed from the DOM.
Allow simple configuration for lookups based on multiple fields using OR.
The problem is: when using the autocomplete fields in formsets that can add forms dynamically (with javascript), like admin inlines, the autocomplete widget is not initialized for newly created widgets.
Dynamic formsets works by keeping a hidden form that gets cloned when the user clicks the "Add" button/link. That hidden form has the widget correctly initialized, but it isn't mean to be used for interaction, only for cloning, to create new forms. When the form gets cloned, the new cloned one doesn't respond to keystrokes, and it may have the events attached, but still related to the hidden widget. Also, calling bindSelectables() after the form has been cloned does nothing.
There was a question about if django-selectable could be used with Twitter Bootstrap and for now it appears the answer is no. The autocomplete plugin in Bootstrap (called typeahead) does not currently support remote sources. There are a couple open issues/examples for adding this:
However Bootstrap is gaining a lot of popularity and having selectable work along side it would be great. Some options are:
Hi, I'm trying to have django-selectable in Django default admin panel.
With the docs I am not able to get it running and even the example project isn't working.
Could you attach a short example?
The issue is similar to <<issue 12>>, an autocomplete form is not working with dynamically added fields. I'm using django-dynamic-formsets and passing the bindSelectables() to the added option, but only the first field is working as expected, also removing fields broke the functionality of the form
Might need some JS changes to make it possible but it would be nice to see some fancy output formats like django-ajax-selects.
Even with such flawlessly written docs somehow there is still confusion about including these requirements. It would be straight forward to write a template tag to include them.
It would be nice to have a plus add more -link next to selectable widget. Just like the one there is next to foreign key selectboxes on admin site.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.