Autocomplete feature on input field

[Deepak Sharma]

In my application I have a drop-down, I want to input a value in a text-field and while inputting it the drop-down should display the option for auto-completing it. Following is the code snippet

<div class="field">
  <%= f.label :patient_id %><br>
  <%= f.collection_select(:patient_id, Patient.all, :id, :patient_identity, {:prompt => "Select patient"}, :selected => @vital.patient_id, required: true) %>
</div>

In the above code I have the drop-down that display all the option. What changes or what tag should I have to use input-text field and it's auto-complete feature.

--
Cheers!

Deepak Kumar Sharma
Guru Nanak Dev Engineering College
India!

Blog: http://deekysharma.wordpress.com

[Walter Lee Davis]

On Nov 7, 2015, at 3:48 PM, Deepak Sharma <deeky....@gmail.com> wrote:

> In my application I have a drop-down, I want to input a value in a text-field and while inputting it the drop-down should display the option for auto-completing it. Following is the code snippet
>
> <div class="field">
> <%= f.label :patient_id %><br>
> <%= f.collection_select(:patient_id, Patient.all, :id, :patient_identity, {:prompt => "Select patient"}, :selected => @vital.patient_id, required: true) %>
> </div>
>
> In the above code I have the drop-down that display all the option. What changes or what tag should I have to use input-text field and it's auto-complete feature.
>

I've had a lot of luck adding the Chosen JavaScript to an existing picking list. Strictly speaking, it's not an auto-complete in the classical Ajax sense, because all of the options are already in the page, you're not making background requests to search for options. https://github.com/harvesthq/chosen/

Walter

> --
> Cheers!
>
> Deepak Kumar Sharma
> Guru Nanak Dev Engineering College
> India!
>
> Blog: http://deekysharma.wordpress.com
>

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/CALDHwN6AtoMSH3qGd84zrFhyEFZjqNTo9jF89P6MKoGGuX6swQ%40mail.gmail.com.
> For more options, visit https://groups.google.com/d/optout.

[Deepak Sharma]

On Sun, Nov 8, 2015 at 6:47 PM, Walter Lee Davis <wa...@wdstudio.com> wrote:
>
> I've had a lot of luck adding the Chosen JavaScript to an existing picking list. Strictly speaking, it's not an auto-complete in the classical Ajax sense, because all of the options are already in the page, you're not making background requests to search for options. https://github.com/harvesthq/chosen/

+1

Simple and sturdy gem to serve my purpose. Thanks Walter.

[Anand Meyyappan]

Hi Deepak,

Generally I prefer chosen.js for static select list. It works out of the box simply by adding 'chosen-select' class to select tag. If your list is massivly big ajax-chosen.js is best choice. You can filer select result by sending search query to server when user start typing on the text box.

https://harvesthq.github.io/chosen/
https://github.com/meltingice/ajax-chosen

There is also typeahead-rails gem. It is also based on js solution which I haven't tried but worth for you to look at.

https://github.com/torbjon/typeahead-rails

Thanks
Anand

[Deepak Sharma]

On Sun, Nov 8, 2015 at 4:29 PM, Anand Meyyappan <anands...@gmail.com> wrote:
> Hi Deepak,
>
> Generally I prefer chosen.js for static select list. It works out of the box simply by adding 'chosen-select' class to select tag. If your list is massivly big ajax-chosen.js is best choice. You can filer select result by sending search query to server when user start typing on the text box.
>
> https://harvesthq.github.io/chosen/
> https://github.com/meltingice/ajax-chosen

Actually, in my app

<option> field = number of patient added

Means as much as patient added, list gain it's size according to that
so, it seems 'ajax-chosen' works great for me.

Right now I'm playing with 'chosen' only. I'm facing little obstacle
in it, although it works like a charm but in order to work it properly
I have to refresh my page only then it come into effect. Else, if I
click on button and move to 'vital/new.html.erb' page it show simple
text field, once I refresh my page then it comes into effect. Any idea
what's happing.

I have followed this : https://github.com/tsechingho/chosen-rails

> There is also typeahead-rails gem. It is also based on js solution which I haven't tried but worth for you to look at.
>
> https://github.com/torbjon/typeahead-rails

Surely, I'll check this out once I grab a hold on chosen.

[Walter Lee Davis]

You're running into the usual conflict with Turbolinks. Instead of using $(document).ready(...) (jquery) or document.on('dom:loaded', ...) (prototype), you have to listen for a different event in order to start your script:

$(document).on('page:change', ...) replaces $(document).ready(...) in jQuery, and document.on('page:change', ...) does the same in Prototype.

This is all because with Turbolinks, the outermost page loads only once, and never again unless something really disruptive happens to cause a hard reload of the browser. So the usual dom load event only fires once, and any updates to the page don't register with your JavaScript code.

Walter

>
>
> --
> Cheers!
>
> Deepak Kumar Sharma
> Guru Nanak Dev Engineering College
> India!
>
> Blog: http://deekysharma.wordpress.com
>

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/CALDHwN6n3edfginJV7DHhP2v_FCtq%3DB72wdAWUDrvQvMHyaD6Q%40mail.gmail.com.

[Deepak Sharma]

On Sun, Nov 8, 2015 at 11:40 PM, Walter Lee Davis <wa...@wdstudio.com> wrote:
> This is all because with Turbolinks, the outermost page loads only once, and never again unless something really disruptive happens to cause a hard reload of the browser. So the usual dom load event only fires once, and any updates to the page don't register with your JavaScript code.

What would the best practice to overcome this problem. Do I use static
file 'chosen.min.css' and 'chosen.jquery.min.js' and put then in
assets/stylesheet and assets/javascript folder respectively or
something else.

Right now I put below code in application.js file

$(function() {
return $('.chosen-select').chosen({
allow_single_deselect: true,
no_results_text: 'No results matched',
width: '200px'
});
});

What modification do I need to do I above code so that I runs well.

Please pardon me, my hand is little tight in jQuery :).

[Deepak Sharma]

I found a solution for above mentioned problem

This gem solves my purpose : https://github.com/kossnocorp/jquery.turbolinks