Django Autocomplete with jQuery UI | AJAX | Search | Filter from Database | Tutorial | Code Band

[@Juan-Far]

As an absolute noobie that is just learning all of this, you just saved me at least 5 hours of my life. Great video man!

[@CodeBand]

Very glad to hear that..keep going❤️

[@alokyadav6812]

Crystal clear explanation, Thank you.

[@CodeBand]

Glad to hear that :)

[@marcinpasikowski5125]

Thank you! This is exactly what I needed. Simple and step by step so I can start implementing it in my code and building from it , actually understanding what I am doing, not just pasting ready solutions. Great job!

[@CodeBand]

Glad it helped! Keep going👍🏻

[@shubhamgupta7730]

You are awesome dude. Love you ♥️.

[@CodeBand]

😊

[@jmpersic]

Excellent video, a diamond in the rough. Thanks.

[@CodeBand]

Very glad to hear that... 👍🏻

[@edgarprada3171]

I've been looking for a tutorial like this, simple and clear. Thanks.

[@CodeBand]

Glad to hear that bro...❤️

[@janzsobence]

Thanks! It's very straightforward video.

[@CodeBand]

Glad to hear that😊

[@DemolaOkesola]

Simple and very clear! Thanks for this

[@CodeBand]

Glad it was helpful!

[@hildaamadu8920]

Thanks so much for this. Looked for a lot of vids to help with this, fortunately your vid helped a ton!

[@hildaamadu8920]

I'm trying to do the same for multiple inputs but it isn't working. Can anyone help?

[@brunocoutinho8799]

This was exactly what I was looking for, great video! Thanks

[@CodeBand]

Glad it was helpful!

[@TUALERON]

It worked perfectly thanks!!!!!!

[@CodeBand]

Glad it helped

[@fahimkamalahmed3544]

Thank you. I learn something new from you, and with it you earned a new subscriber.

[@CodeBand]

Its my pleasure brother...Thanks for subscribing and also please share my channel in your circle...Keep learning :)

[@dantedt3931]

Great video!Subscribed.

[@CodeBand]

Glad to hear that❤️

[@FaizudheenM]

I have started studying Laravel using your tutorials. It's very helpful ❤️😍 Keep On Going 🤘🔥🔥🔥

[@CodeBand]

Glad to hear that brother...Thank you and Keep learning..:)

[@paulohsgoes1959]

Thanks a lot for sharing. I'll try this out in my project. Nice job!

[@CodeBand]

Glad to hear that...❤️

[@FaizudheenM]

The way you presented is very perfect ❤️🔥

[@CodeBand]

Thanks a lot brother...keep supporting.. :)

[@ayabc4320]

Very useful 🙏💙❤️

[@CodeBand]

Glad it was helpful!😊😊

[@nikolat_272]

Tnx bro , it works for me

[@andreyandreyovich5454]

thanks, really great

[@CodeBand]

Glad to hear that😊

[@papyasultanasultana642]

Thanks brother thanks a lot ,

[@CodeBand]

Glad to hear that and keep watching😊

[@JimitRupani]

Great Video.

[@CodeBand]

Glad you enjoyed it

[@MotorbreathcL]

Thank you!

[@CodeBand]

😊

[@rohansadhukhan1198]

Life saver!

[@CodeBand]

Glad to hear that👍🏻

[@ahmedsamv3988]

nice video, thanks a lot.

[@CodeBand]

Glad you liked it!😊

[@thiagodantas4304]

Thanks!!

[@CodeBand]

You're welcome😊

[@ROMAN-zu3wu]

Great

[@ahmed_mag]

Thank you . I want to trace query set i use django debug toolbar but it dos,t work with ajax query how i can know how many queries when i use ajax

[@CodeBand]

stackoverflow.com/questions/5124975/how-to-use-django-debug-toolbar-on-ajax-calls

[@habibhafsa1254]

Excellent tutorial. How to recover the selected value as a variable? Thank you!

[@CodeBand]

Glad to hear that, and you can get the selected value by targeting the input field and getting the value, something like $("#id_of_input").val() in jQuery will pull the value.

[@KrishnaManohar8021]

Super...

[@CodeBand]

Thank you and keep supporting... :)

[@KrishnaManohar8021]

@@CodeBand start telegram group.

[@CodeBand]

@@KrishnaManohar8021 Yeah, going to start soon...

[@CodeBand]

Started telegram and whatsapp groups... t.me/communitycodeband chat.whatsapp.com/D1KmrW3euZa4nUmIYgv04P

[@yorker3148]

Thanks !! ,very good info , Is it possible to do this with only javascript , without using JQuery?

[@CodeBand]

Yes, definitely. jQuery just makes it easy, that's it.

[@mfsdrawings8600]

Very nice

[@CodeBand]

Thanks

[@eskimo-com-ua]

Hi, thanks for the video. How to do it for two different forms with different data on one page?

[@CodeBand]

Sorry for the late reply... You can absolutely do that... At the end, you are selecting an input element and applying the autocomplete functionality... so definitely you can do the same for other input by targeting that element with a different id, for example.

[@marvinguillan3677]

Thanks for this, it was really helpful. Do you know how to add a select event onto this? So for example, if I had a page for each product, and a get_absolute_url function for it too, how would I redirect to the product's page when clicking on its title in the dropdown? I'm struggling with how to use the product's title to then fetch the product and use its get_absolute_url in the javascript.

[@CodeBand]

Glad to hear that...binding a select event is very simple. There is a select prop you can use on the autocomplete function. Check this article here www.tutorialspark.com/jqueryUI/jQuery_UI_AutoComplete_Events.php Hope this helps😊

[@pranavshinde2535]

Why can't we fetch all the list of values from server only once and then it is used everytime I type anything in the box.

[@CodeBand]

Yeah, that's also possible and it is the recommended solution in some cases... Here, we make it more dynamic... If you feel like your data doesn't change more often, then you could stick to that method...

[@arjunpa8648]

thanks❤️

[@CodeBand]

😊😊

[@abidmohamednadhir9575]

Thanks for that great video but do you have any resources on how after selection I can submit a django model?

[@CodeBand]

Hey bro, this is just selecting an option right upon typing right, the rest of the things are same, if you submit the form, you get that data at the backend. Hope I answered the query, please let me know if you have any doubts... Thank you:)

[@epsweepstakes7889]

@@CodeBand Hey I am having this same issue as well. Been googling around nonstop but can't figure it out... can you please lead me in the right direction?

[@CodeBand]

@@epsweepstakes7889 I couldn't figure out why you can't submit the form ? Please post more detail about the issue...

[@epsweepstakes7889]

@@CodeBand Idk javascript confuses the hell out of me lol but I finally just figured it out. Think I read 100 stackoverflow posts haha

[@CodeBand]

@@epsweepstakes7889 lol😂 Some things are like that...you might need to research a lot to get into a solution... But, believe me, you'll get the solution eventually😊

[@BrighterWay]

Awesome Tutorial! Bro do we use this to multiple fields in one form??

[@CodeBand]

Yes, of course we can do that 😊

[@BrighterWay]

@@CodeBand any Reference for that?? How can I Do it??

[@CodeBand]

@@BrighterWay It's almost the same procedure as in this video, just give it a try yourself, its not that hard. :)

[@yurigorohov9575]

Hello, thx for this lesson. Can u help and tell how can i rename url pattern, when i use live search i have url like this ?q=New+York%2C+NY, and i want like this new-york-ny

[@christiancasanova4176]

Is it possible to make this in a class (CreateView)? Is not working for me

[@CodeBand]

Yup, it will work if the setup is correct. And the type of generic view (CreateView etc) differs based on your use case.

[@himanshushekharjha6248]

This is really cool. I also wanted to enhance this feature by those making the portion of the strings that we search appear bold in results, like Google search. Is there any way to do that?

[@CodeBand]

I'm not very sure if that feature is built into jQuery UI. Please check jQuery UI Docs. Otherwise, I believe you can do that with some css.

[@nicenaija9952]

Make more Ajax django Tutorial

[@CodeBand]

Sure bro...will definitely do in future...😊

[@asgeralia8802]

Sir can u please dynamic search or auto complete bcz I want apply several template

[@kkmusic_kp]

Once a suggestion is selected I want to get related data from json to be updated in another field. How to do that?

[@CodeBand]

api.jqueryui.com/autocomplete/#event-select You can use this event listener.

[@maqsoodhakro136]

Hello sir, thanks for amazing tutorial. I have successfully implemented in website & it works perfectly , just I am facing one problem. When I type fast hit enter, it shows previous list. how can i solved this problem? thanks.

[@CodeBand]

You can make a delay prop in the widget... Refer docs here : api.jqueryui.com/autocomplete/

[@akmshariaradditionaldirect3442]

Thanks you for your tutorials. I request you to make a tutorials about autocomplete address information where user just submit pin code then division, district and upazila automatically set from database or views.py like choice fields

[@CodeBand]

Great suggestion! Checkout Google Address Autocompletion feature, btw. developers.google.com/places/web-service/autocomplete

[@uberdamcavaletti]

Excelent video, but i search the data in a foreign key model ?

[@CodeBand]

Thank you... you can use __ to access related model attribute. For eg., qs = Product.objects.filter(category__name='test')

[@asgeralia8802]

Multiple text boxs in a form like city, state, designation, department, gender likewise.

[@uberdamcavaletti]

How to validate autocomplete field in form ? To appear a message in form "This field is mandatory "

[@CodeBand]

You can use different events available on the plugin. Refer api.jqueryui.com/autocomplete/#event-change

[@MrDmitriM]

It will be better to use generator instead of classic for loop, couse it's a bit faster. Something like this: titles = [product.title for product in qs]

[@CodeBand]

Absolutely correct..The video is more of a beginner friendly one...and thats why I took the other way...👍🏻

[@InspiredHarvey]

it would actually be better to use titles = list(qs.values_list('title')) so you only get back a list of titles from db

[@fowad27]

what if I want to call this within another template?

[@CodeBand]

Its fairly simple, right ... doesn't really matter from where you're calling...

[@aakashverma8602]

hello thanks for the video , it work fyn in my development server but does not work in production . it gives (index):115 Uncaught TypeError: $(...).autocomplete is not a function in console . pleasereply with suitable solution, if possible

[@CodeBand]

There might be some issues with the imported jqueryui library... See this : stackoverflow.com/questions/16300586/typeerror-autocomplete-is-not-a-function

[@asgeralia8802]

Sir pls explain django-auto complete-light

[@binladen360]

I use your code from Github but it still doesn't show search suggestions from the autocomplete box

[@CodeBand]

It should have worked as it does in the video...please cross check your code with the one in video.. 😊

[@stelity]

you have to add pen, pencil, etc to the products when you log in as admin

[@Isha7558]

hello can u do a video on date range filter on data table with ajax

[@CodeBand]

Will try to do that in the future... :) And for your reference, you can basically do pretty much the same procedure as in this video, the only thing that might change is the js library.

[@imranmidday364]

Reverse for 'psearch' not found. 'psearch' is not a valid view function or pattern name. I'm getting this error

[@CodeBand]

You might be using reverse() or redirect() in your application and the argument you provided does not exist. Meaning there is no url that has the name='psearch' in your application. May be you misspelled it to be 'search' or you might not have given name property to the url .Please check that and thanks😊

[@littlejaychou798]

Does anyone know how to do the same but with bootstrap tagsinput typeahead or autocomplete? bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

[@CodeBand]

I haven't personally worked with it...I have gone through the docs, its not that hard, you can implement it..👍🏻Keep going😊

[@MohitYadav-ie2wu]

facing this error: Uncaught TypeError: $(...).autocomplete is not a function

[@CodeBand]

That's because, you might not have imported jquery or/and jqueryui...

[@СергійКрук-ж4ю]

@@CodeBand no, i have the same problem and i have imported all we need

[@mbuagbor3482]

how can i use the jquery offline

[@CodeBand]

You can just download the cdn file and paste it locally...then in script src change it to the local path...

[@mbuagbor3482]

@@CodeBand ok i figure it out already, thanks for the video it really help but does not work well with bootstrap

[@mbuagbor3482]

can you help me with that ?

[@CodeBand]

​@@mbuagbor3482 Glad to hear that...and with Bootstrap also, it will work fine...

[@CodeBand]

@@mbuagbor3482 Bootstrap classes would work fine, I believe...Please let me know the issue you are facing when integrating Bootstrap..😊

[@akashtyagi7182]

I am passing list as context on my form page, but when I try to use it like this: ``` $( function() { $( "#mylist" ).autocomplete({ source: {{mylist}} }); } ); ``` It gives me error as {{}} creates error. How do I pass my context data ?

[@CodeBand]

{{ }} this should work probably. By the way, I didn't quite get your question...

[@akashtyagi7182]

@@CodeBand It doesn't work within . Way around is create variable as var newlist = {{mylist}} and then use 'newlist' variable in script

[@AnjaliSingh-bg7gx]

Bro the url given to the view function gives error

[@CodeBand]

Please show me the error console, so that I could figure it out. Also, feel free to join Code Band Community groups in WhatsApp and Telegram, if possible so that you can ask the queries with screenshots. WhatsApp: lnkd.in/gJ-rrrz Telegram: t.me/codebandcommunity

[@ancy70]

Thank you!

[@CodeBand]

Welcome 😀