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!
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.
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
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...
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.
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
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.
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😊
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.
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?
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:)
@@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?
@@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😊
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
There might be some issues with the imported jqueryui library... See this : stackoverflow.com/questions/16300586/typeerror-autocomplete-is-not-a-function
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]
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.
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😊
Does anyone know how to do the same but with bootstrap tagsinput typeahead or autocomplete? bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
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 ?
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
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!
Very glad to hear that..keep going❤️
Crystal clear explanation, Thank you.
Glad to hear that :)
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!
Glad it helped! Keep going👍🏻
I've been looking for a tutorial like this, simple and clear. Thanks.
Glad to hear that bro...❤️
Thanks so much for this. Looked for a lot of vids to help with this, fortunately your vid helped a ton!
I'm trying to do the same for multiple inputs but it isn't working. Can anyone help?
This was exactly what I was looking for, great video! Thanks
Glad it was helpful!
Excellent video, a diamond in the rough. Thanks.
Very glad to hear that... 👍🏻
Simple and very clear! Thanks for this
Glad it was helpful!
Thanks! It's very straightforward video.
Glad to hear that😊
You are awesome dude. Love you ♥️.
😊
Thank you. I learn something new from you, and with it you earned a new subscriber.
Its my pleasure brother...Thanks for subscribing and also please share my channel in your circle...Keep learning :)
Thanks a lot for sharing. I'll try this out in my project. Nice job!
Glad to hear that...❤️
I have started studying Laravel using your tutorials. It's very helpful ❤️😍 Keep On Going 🤘🔥🔥🔥
Glad to hear that brother...Thank you and Keep learning..:)
It worked perfectly thanks!!!!!!
Glad it helped
Thanks brother thanks a lot ,
Glad to hear that and keep watching😊
Tnx bro , it works for me
thanks, really great
Glad to hear that😊
Excellent tutorial. How to recover the selected value as a variable? Thank you!
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.
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
stackoverflow.com/questions/5124975/how-to-use-django-debug-toolbar-on-ajax-calls
Very useful 🙏💙❤️
Glad it was helpful!😊😊
The way you presented is very perfect ❤️🔥
Thanks a lot brother...keep supporting.. :)
Great video!Subscribed.
Glad to hear that❤️
Sir can u please dynamic search or auto complete bcz I want apply several template
Great
Thank you!
😊
Great Video.
Glad you enjoyed it
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
nice video, thanks a lot.
Glad you liked it!😊
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.
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...
Very nice
Thanks
Thanks !! ,very good info , Is it possible to do this with only javascript , without using JQuery?
Yes, definitely. jQuery just makes it easy, that's it.
Hi, thanks for the video.
How to do it for two different forms with different data on one page?
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.
How to validate autocomplete field in form ? To appear a message in form "This field is mandatory "
You can use different events available on the plugin. Refer api.jqueryui.com/autocomplete/#event-change
Once a suggestion is selected I want to get related data from json to be updated in another field. How to do that?
api.jqueryui.com/autocomplete/#event-select
You can use this event listener.
Thanks!!
You're welcome😊
Is it possible to make this in a class (CreateView)? Is not working for me
Yup, it will work if the setup is correct. And the type of generic view (CreateView etc) differs based on your use case.
Excelent video, but i search the data in a foreign key model ?
Thank you... you can use __ to access related model attribute.
For eg.,
qs = Product.objects.filter(category__name='test')
Multiple text boxs in a form like city, state, designation, department, gender likewise.
Make more Ajax django Tutorial
Sure bro...will definitely do in future...😊
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
Great suggestion! Checkout Google Address Autocompletion feature, btw.
developers.google.com/places/web-service/autocomplete
what if I want to call this within another template?
Its fairly simple, right ... doesn't really matter from where you're calling...
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.
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😊
thanks❤️
😊😊
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.
You can make a delay prop in the widget...
Refer docs here : api.jqueryui.com/autocomplete/
Sir pls explain django-auto complete-light
Super...
Thank you and keep supporting... :)
@@CodeBand start telegram group.
@@KrishnaManohar8021 Yeah, going to start soon...
Started telegram and whatsapp groups...
t.me/communitycodeband
chat.whatsapp.com/D1KmrW3euZa4nUmIYgv04P
Awesome Tutorial! Bro do we use this to multiple fields in one form??
Yes, of course we can do that 😊
@@CodeBand any Reference for that?? How can I Do it??
@@BrighterWay It's almost the same procedure as in this video, just give it a try yourself, its not that hard. :)
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?
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.
Thanks for that great video but do you have any resources on how after selection I can submit a django model?
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:)
@@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?
@@epsweepstakes7889 I couldn't figure out why you can't submit the form ? Please post more detail about the issue...
@@CodeBand Idk javascript confuses the hell out of me lol but I finally just figured it out. Think I read 100 stackoverflow posts haha
@@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😊
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
There might be some issues with the imported jqueryui library...
See this : stackoverflow.com/questions/16300586/typeerror-autocomplete-is-not-a-function
Life saver!
Glad to hear that👍🏻
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]
Absolutely correct..The video is more of a beginner friendly one...and thats why I took the other way...👍🏻
it would actually be better to use titles = list(qs.values_list('title')) so you only get back a list of titles from db
hello can u do a video on date range filter on data table with ajax
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.
I use your code from Github but it still doesn't show search suggestions from the autocomplete box
It should have worked as it does in the video...please cross check your code with the one in video.. 😊
you have to add pen, pencil, etc to the products when you log in as admin
Reverse for 'psearch' not found. 'psearch' is not a valid view function or pattern name. I'm getting this error
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😊
Does anyone know how to do the same but with bootstrap tagsinput typeahead or autocomplete? bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
I haven't personally worked with it...I have gone through the docs, its not that hard, you can implement it..👍🏻Keep going😊
facing this error: Uncaught TypeError: $(...).autocomplete is not a function
That's because, you might not have imported jquery or/and jqueryui...
@@CodeBand no, i have the same problem and i have imported all we need
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 ?
{{ }} this should work probably. By the way, I didn't quite get your question...
@@CodeBand It doesn't work within .
Way around is create variable as
var newlist = {{mylist}}
and then use 'newlist' variable in script
Bro the url given to the view function gives error
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
how can i use the jquery offline
You can just download the cdn file and paste it locally...then in script src change it to the local path...
@@CodeBand ok i figure it out already, thanks for the video it really help but does not work well with bootstrap
can you help me with that ?
@@mbuagbor3482 Glad to hear that...and with Bootstrap also, it will work fine...
@@mbuagbor3482 Bootstrap classes would work fine, I believe...Please let me know the issue you are facing when integrating Bootstrap..😊
Thank you!
Welcome
😀