I need to provide users with the ability to search in a field and have auto-complete options offered. However I also need additional fields in a form to be filled based on their selection. E.g. say this is a product list, the auto-complete field could be the product name. Once they select the name, description prices & whatever gets filled in subsequent fields in that table/form.
From what I see, both django auto-complete-light and jquery auto-complete could do for my base use case. The application is somewhat large so I’m likely to end up with more use cases for this.
Anyone here has experience with both, or some relevent opinion/source of information as to how they compare and why I would want to favor one over the other? (other than Jquery being part of a much larger project, whereas the the django complete is just an app built by separate team)? Your personal notes/experience with either of them would also be welcomed.
Maybe it seems complex, but if you need to make several forms with autocomplete functionality, I think it pays off. Just create an autocomplete view, an url and use it in a widget.
However I ended up going with jquery. There are a few upsides that I see with it. I have only prototyped with django-auto-complete, so do take those with a grain of salt.
Jquery is a much wider library
That’s a plus, because if there’s any chances you’ll need to do other javascript-sy stuff (ajax calls etc.) then you’ll already have to manage some sort of javascript code base. Therefore the auto-complete codes will just fit into that organisation. I find it neat. Plus if the auto-complete features I’ve implemented are needed within those other javascript-sy things.
Minimal changes needed on the Django-side
The only thing one needs to change in django is adding endpoints to allow for the ajax calls to be made - so one more entry in urls.py to provide an endpoint, and 1 method in views.py to process the request & return the results (no need really for CBV for this, my methods for this are 3-4 lines or code really).
Jquery is not going anywhere, large documentation/support base
The docs for auto-complete is OK, but it largely relies on examples of code you have to sift through in order to what more advanced uses. I’ve found that for base cases, yes the django app is nice and it also works in the admin view quite easily, however the more complicated the use-case, the easier jquery becomes to use. In other words, the incremental cost in complexity to me as a programmer to do more complicated stuff wrt to auto-complete is much smaller with jquery than with django-autocomplete. I’m already using jquery selectors etc.
Hi there,
I am new to Django and I have like 40,000 addresses (strings of ~60 characters) to autocomplete in a search bar. Which one you think would be more suitable?
Is there any good tutorial for autocomplete with this amount of strings? The one for “django auto-complete light” is a bit hard to follow for a newbie
First, you really should start separate question for, well, separate questions.
That being said, I don’t think full addresses are really a good match for either one. Or well I think you should make it a few fields, and auto-complete each fields separately, possible filtering your search parameters based on the previous fields (countries/states/streets etc.). With jquery search, you could do something like this:
js:
$('#someElement').delegate('#selector', 'focusin', function(){
$(this).val(""); // clear current value to facilitate new entries, tab etc.
$(this).autocomplete({
// this defines where to get the data - some ajax endpoints that returns the options
source: function( request, response ) {
// my specific case has auto-complete within a <table>, so I'm storing the url there
// but adjust to need. this is based on data attribute (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)
let url = $(this)[0].element.closest("table").attr("data-ajax-1");
$.ajax( {
url: url,
dataType: "json",
data: {
term: request.term,
extra_data: $('extraDataSelector').val()
},
success: function( data ) {
response( data );
}
} );
},
// see the docs, but basically tailors stuff like waiting a few chars before sending off a request
// also can set a delay after input, and setting a z-index to ensure the pop isn't under other stuff in the page
minLength: 0,
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99);
}, 0);
},
}).focus(function(){
$(this).autocomplete("search");
});
});
@login_required
def ajax_cases_axex(request):
range = request.GET.get("term")
extra_data = request.GET.get("extra_data")
# make requests to the ORM to find stuff or whatever
return JsonResponse(results, safe=False)
Sorry logikonabstractions for the bad formulated questions and thanks so much for the jquery skeleton! I will use it as the base for my case. I am very newbie on front end stuff so it will take me some time! Thanks again!
