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

  Рет қаралды 30,522

Code Band

Code Band

Күн бұрын

Пікірлер: 134
@Juan-Far
@Juan-Far 4 жыл бұрын
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
@CodeBand 4 жыл бұрын
Very glad to hear that..keep going❤️
@alokyadav6812
@alokyadav6812 2 жыл бұрын
Crystal clear explanation, Thank you.
@CodeBand
@CodeBand 2 жыл бұрын
Glad to hear that :)
@ahmed_mag
@ahmed_mag 3 жыл бұрын
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
@CodeBand 3 жыл бұрын
stackoverflow.com/questions/5124975/how-to-use-django-debug-toolbar-on-ajax-calls
@marcinpasikowski5125
@marcinpasikowski5125 4 жыл бұрын
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
@CodeBand 4 жыл бұрын
Glad it helped! Keep going👍🏻
@edgarprada3171
@edgarprada3171 4 жыл бұрын
I've been looking for a tutorial like this, simple and clear. Thanks.
@CodeBand
@CodeBand 4 жыл бұрын
Glad to hear that bro...❤️
@shubhamgupta7730
@shubhamgupta7730 3 жыл бұрын
You are awesome dude. Love you ♥️.
@CodeBand
@CodeBand 3 жыл бұрын
😊
@pranavshinde2535
@pranavshinde2535 3 жыл бұрын
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
@CodeBand 3 жыл бұрын
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...
@yurigorohov9575
@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
@eskimo-com-ua
@eskimo-com-ua 3 жыл бұрын
Hi, thanks for the video. How to do it for two different forms with different data on one page?
@CodeBand
@CodeBand 3 жыл бұрын
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.
@christiancasanova4176
@christiancasanova4176 2 жыл бұрын
Is it possible to make this in a class (CreateView)? Is not working for me
@CodeBand
@CodeBand 2 жыл бұрын
Yup, it will work if the setup is correct. And the type of generic view (CreateView etc) differs based on your use case.
@jmpersic
@jmpersic 2 жыл бұрын
Excellent video, a diamond in the rough. Thanks.
@CodeBand
@CodeBand 2 жыл бұрын
Very glad to hear that... 👍🏻
@kkmusic_kp
@kkmusic_kp 2 жыл бұрын
Once a suggestion is selected I want to get related data from json to be updated in another field. How to do that?
@CodeBand
@CodeBand 2 жыл бұрын
api.jqueryui.com/autocomplete/#event-select You can use this event listener.
@asgeralia8802
@asgeralia8802 Ай бұрын
Sir can u please dynamic search or auto complete bcz I want apply several template
@marvinguillan3677
@marvinguillan3677 4 жыл бұрын
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
@CodeBand 4 жыл бұрын
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😊
@hildaamadu8920
@hildaamadu8920 Жыл бұрын
Thanks so much for this. Looked for a lot of vids to help with this, fortunately your vid helped a ton!
@hildaamadu8920
@hildaamadu8920 Жыл бұрын
I'm trying to do the same for multiple inputs but it isn't working. Can anyone help?
@abidmohamednadhir9575
@abidmohamednadhir9575 4 жыл бұрын
Thanks for that great video but do you have any resources on how after selection I can submit a django model?
@CodeBand
@CodeBand 4 жыл бұрын
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
@epsweepstakes7889 3 жыл бұрын
@@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
@CodeBand 3 жыл бұрын
@@epsweepstakes7889 I couldn't figure out why you can't submit the form ? Please post more detail about the issue...
@epsweepstakes7889
@epsweepstakes7889 3 жыл бұрын
@@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
@CodeBand 3 жыл бұрын
@@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😊
@janzsobence
@janzsobence 3 жыл бұрын
Thanks! It's very straightforward video.
@CodeBand
@CodeBand 3 жыл бұрын
Glad to hear that😊
@habibhafsa1254
@habibhafsa1254 2 жыл бұрын
Excellent tutorial. How to recover the selected value as a variable? Thank you!
@CodeBand
@CodeBand 2 жыл бұрын
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.
@fowad27
@fowad27 2 жыл бұрын
what if I want to call this within another template?
@CodeBand
@CodeBand 2 жыл бұрын
Its fairly simple, right ... doesn't really matter from where you're calling...
@DemolaOkesola
@DemolaOkesola 3 жыл бұрын
Simple and very clear! Thanks for this
@CodeBand
@CodeBand 3 жыл бұрын
Glad it was helpful!
@brunocoutinho8799
@brunocoutinho8799 3 жыл бұрын
This was exactly what I was looking for, great video! Thanks
@CodeBand
@CodeBand 3 жыл бұрын
Glad it was helpful!
@uberdamcavaletti
@uberdamcavaletti 3 жыл бұрын
How to validate autocomplete field in form ? To appear a message in form "This field is mandatory "
@CodeBand
@CodeBand 3 жыл бұрын
You can use different events available on the plugin. Refer api.jqueryui.com/autocomplete/#event-change
@TUALERON
@TUALERON 2 жыл бұрын
It worked perfectly thanks!!!!!!
@CodeBand
@CodeBand 2 жыл бұрын
Glad it helped
@himanshushekharjha6248
@himanshushekharjha6248 4 жыл бұрын
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
@CodeBand 4 жыл бұрын
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.
@uberdamcavaletti
@uberdamcavaletti 3 жыл бұрын
Excelent video, but i search the data in a foreign key model ?
@CodeBand
@CodeBand 3 жыл бұрын
Thank you... you can use __ to access related model attribute. For eg., qs = Product.objects.filter(category__name='test')
@binladen360
@binladen360 4 жыл бұрын
I use your code from Github but it still doesn't show search suggestions from the autocomplete box
@CodeBand
@CodeBand 4 жыл бұрын
It should have worked as it does in the video...please cross check your code with the one in video.. 😊
@stelity
@stelity 4 жыл бұрын
you have to add pen, pencil, etc to the products when you log in as admin
@aakashverma8602
@aakashverma8602 4 жыл бұрын
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
@CodeBand 4 жыл бұрын
There might be some issues with the imported jqueryui library... See this : stackoverflow.com/questions/16300586/typeerror-autocomplete-is-not-a-function
@fahimkamalahmed3544
@fahimkamalahmed3544 4 жыл бұрын
Thank you. I learn something new from you, and with it you earned a new subscriber.
@CodeBand
@CodeBand 4 жыл бұрын
Its my pleasure brother...Thanks for subscribing and also please share my channel in your circle...Keep learning :)
@yorker3148
@yorker3148 3 жыл бұрын
Thanks !! ,very good info , Is it possible to do this with only javascript , without using JQuery?
@CodeBand
@CodeBand 3 жыл бұрын
Yes, definitely. jQuery just makes it easy, that's it.
@ayabc4320
@ayabc4320 3 жыл бұрын
Very useful 🙏💙❤️
@CodeBand
@CodeBand 3 жыл бұрын
Glad it was helpful!😊😊
@imranmidday364
@imranmidday364 4 жыл бұрын
Reverse for 'psearch' not found. 'psearch' is not a valid view function or pattern name. I'm getting this error
@CodeBand
@CodeBand 4 жыл бұрын
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😊
@MrDmitriM
@MrDmitriM 4 жыл бұрын
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
@CodeBand 4 жыл бұрын
Absolutely correct..The video is more of a beginner friendly one...and thats why I took the other way...👍🏻
@InspiredHarvey
@InspiredHarvey 4 жыл бұрын
it would actually be better to use titles = list(qs.values_list('title')) so you only get back a list of titles from db
@FaizudheenM
@FaizudheenM 4 жыл бұрын
I have started studying Laravel using your tutorials. It's very helpful ❤️😍 Keep On Going 🤘🔥🔥🔥
@CodeBand
@CodeBand 4 жыл бұрын
Glad to hear that brother...Thank you and Keep learning..:)
@maqsoodhakro136
@maqsoodhakro136 3 жыл бұрын
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
@CodeBand 3 жыл бұрын
You can make a delay prop in the widget... Refer docs here : api.jqueryui.com/autocomplete/
@dantedt3931
@dantedt3931 4 жыл бұрын
Great video!Subscribed.
@CodeBand
@CodeBand 4 жыл бұрын
Glad to hear that❤️
@asgeralia8802
@asgeralia8802 11 ай бұрын
Multiple text boxs in a form like city, state, designation, department, gender likewise.
@paulohsgoes1959
@paulohsgoes1959 4 жыл бұрын
Thanks a lot for sharing. I'll try this out in my project. Nice job!
@CodeBand
@CodeBand 4 жыл бұрын
Glad to hear that...❤️
@JimitRupani
@JimitRupani 4 жыл бұрын
Great Video.
@CodeBand
@CodeBand 4 жыл бұрын
Glad you enjoyed it
@nicenaija9952
@nicenaija9952 3 жыл бұрын
Make more Ajax django Tutorial
@CodeBand
@CodeBand 3 жыл бұрын
Sure bro...will definitely do in future...😊
@papyasultanasultana642
@papyasultanasultana642 3 жыл бұрын
Thanks brother thanks a lot ,
@CodeBand
@CodeBand 3 жыл бұрын
Glad to hear that and keep watching😊
@nikolat_272
@nikolat_272 Жыл бұрын
Tnx bro , it works for me
@FaizudheenM
@FaizudheenM 4 жыл бұрын
The way you presented is very perfect ❤️🔥
@CodeBand
@CodeBand 4 жыл бұрын
Thanks a lot brother...keep supporting.. :)
@akmshariaradditionaldirect3442
@akmshariaradditionaldirect3442 4 жыл бұрын
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
@CodeBand 4 жыл бұрын
Great suggestion! Checkout Google Address Autocompletion feature, btw. developers.google.com/places/web-service/autocomplete
@andreyandreyovich5454
@andreyandreyovich5454 3 жыл бұрын
thanks, really great
@CodeBand
@CodeBand 3 жыл бұрын
Glad to hear that😊
@Isha7558
@Isha7558 4 жыл бұрын
hello can u do a video on date range filter on data table with ajax
@CodeBand
@CodeBand 4 жыл бұрын
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.
@asgeralia8802
@asgeralia8802 6 ай бұрын
Sir pls explain django-auto complete-light
@littlejaychou798
@littlejaychou798 4 жыл бұрын
Does anyone know how to do the same but with bootstrap tagsinput typeahead or autocomplete? bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
@CodeBand
@CodeBand 4 жыл бұрын
I haven't personally worked with it...I have gone through the docs, its not that hard, you can implement it..👍🏻Keep going😊
@BrighterWay
@BrighterWay 4 жыл бұрын
Awesome Tutorial! Bro do we use this to multiple fields in one form??
@CodeBand
@CodeBand 4 жыл бұрын
Yes, of course we can do that 😊
@BrighterWay
@BrighterWay 4 жыл бұрын
@@CodeBand any Reference for that?? How can I Do it??
@CodeBand
@CodeBand 4 жыл бұрын
@@BrighterWay It's almost the same procedure as in this video, just give it a try yourself, its not that hard. :)
@ahmedsamv3988
@ahmedsamv3988 4 жыл бұрын
nice video, thanks a lot.
@CodeBand
@CodeBand 4 жыл бұрын
Glad you liked it!😊
@ROMAN-zu3wu
@ROMAN-zu3wu Жыл бұрын
Great
@mbuagbor3482
@mbuagbor3482 4 жыл бұрын
how can i use the jquery offline
@CodeBand
@CodeBand 4 жыл бұрын
You can just download the cdn file and paste it locally...then in script src change it to the local path...
@mbuagbor3482
@mbuagbor3482 4 жыл бұрын
@@CodeBand ok i figure it out already, thanks for the video it really help but does not work well with bootstrap
@mbuagbor3482
@mbuagbor3482 4 жыл бұрын
can you help me with that ?
@CodeBand
@CodeBand 4 жыл бұрын
​@@mbuagbor3482 Glad to hear that...and with Bootstrap also, it will work fine...
@CodeBand
@CodeBand 4 жыл бұрын
@@mbuagbor3482 Bootstrap classes would work fine, I believe...Please let me know the issue you are facing when integrating Bootstrap..😊
@MohitYadav-ie2wu
@MohitYadav-ie2wu 4 жыл бұрын
facing this error: Uncaught TypeError: $(...).autocomplete is not a function
@CodeBand
@CodeBand 4 жыл бұрын
That's because, you might not have imported jquery or/and jqueryui...
@СергійКрук-ж4ю
@СергійКрук-ж4ю 4 жыл бұрын
@@CodeBand no, i have the same problem and i have imported all we need
@mfsdrawings8600
@mfsdrawings8600 4 жыл бұрын
Very nice
@CodeBand
@CodeBand 4 жыл бұрын
Thanks
@AnjaliSingh-bg7gx
@AnjaliSingh-bg7gx 4 жыл бұрын
Bro the url given to the view function gives error
@CodeBand
@CodeBand 4 жыл бұрын
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
@akashtyagi7182
@akashtyagi7182 4 жыл бұрын
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
@CodeBand 4 жыл бұрын
{{ }} this should work probably. By the way, I didn't quite get your question...
@akashtyagi7182
@akashtyagi7182 4 жыл бұрын
@@CodeBand It doesn't work within . Way around is create variable as var newlist = {{mylist}} and then use 'newlist' variable in script
@MotorbreathcL
@MotorbreathcL 3 жыл бұрын
Thank you!
@CodeBand
@CodeBand 3 жыл бұрын
😊
@rohansadhukhan1198
@rohansadhukhan1198 3 жыл бұрын
Life saver!
@CodeBand
@CodeBand 3 жыл бұрын
Glad to hear that👍🏻
@KrishnaManohar8021
@KrishnaManohar8021 4 жыл бұрын
Super...
@CodeBand
@CodeBand 4 жыл бұрын
Thank you and keep supporting... :)
@KrishnaManohar8021
@KrishnaManohar8021 4 жыл бұрын
@@CodeBand start telegram group.
@CodeBand
@CodeBand 4 жыл бұрын
@@KrishnaManohar8021 Yeah, going to start soon...
@CodeBand
@CodeBand 4 жыл бұрын
Started telegram and whatsapp groups... t.me/communitycodeband chat.whatsapp.com/D1KmrW3euZa4nUmIYgv04P
@thiagodantas4304
@thiagodantas4304 3 жыл бұрын
Thanks!!
@CodeBand
@CodeBand 3 жыл бұрын
You're welcome😊
@arjunpa8648
@arjunpa8648 3 жыл бұрын
thanks❤️
@CodeBand
@CodeBand 3 жыл бұрын
😊😊
@ancy70
@ancy70 3 жыл бұрын
Thank you!
@CodeBand
@CodeBand 3 жыл бұрын
Welcome 😀
You don't need a frontend framework
15:45
Andrew Schmelyun
Рет қаралды 135 М.
Search Products - Django Wednesdays ECommerce 26
21:05
Codemy.com
Рет қаралды 6 М.
Маусымашар-2023 / Гала-концерт / АТУ қоштасу
1:27:35
Jaidarman OFFICIAL / JCI
Рет қаралды 390 М.
Every team from the Bracket Buster! Who ya got? 😏
0:53
FailArmy Shorts
Рет қаралды 13 МЛН
Introducing Clay - High Performance UI Layout in C
35:19
Nic Barker
Рет қаралды 121 М.
When Optimisations Work, But for the Wrong Reasons
22:19
SimonDev
Рет қаралды 1,1 МЛН
Django AJAX/JQuery tutorial: AJAX Django TODO app with JQuery | Django Tutorial
1:04:17
Django live search | live search using django and javascript
20:07
Tmux has forever changed the way I write code.
13:30
Dreams of Code
Рет қаралды 1 МЛН
How Senior Programmers ACTUALLY Write Code
13:37
Thriving Technologist
Рет қаралды 1,6 МЛН