CODEWITHSUNDEEP
jqueryruby-on-railsautocompletejquery-tokeninput
Patrick
Patrick

Reputation: 53

Dynamic Autocompletion in Rails, using the jQuery TokenInput Plugin

I'm using the great TokenInput plugin (http://loopj.com/jquery-tokeninput/) for rails to do some autocompletion and for a normal set of data in a model it works just wonderfully. But my problem is, that in my case I have actually 2 textboxes I want to use it on, and the suggestions for the second one should depend on the content of the first. More specifically: I need to select a football club (which I can just autocomplete out of all exisiting clubs in my database) and then the team that played. So the autocompletion for the team should only use the teams associated with the already selected club and I'm completely clueless about how or even if I can do that in rails and with this plugin (but the plugin itself shouldn't really be a hindrance). I guess my main problem here is my lack of experience with javascript, especially in combination with rails. Did anyone do something like that in his/her application and could help me?

Upvotes: 4

Views: 1624

Answers (2)

Patrick
Patrick

Reputation: 53

Thanks for your answer. I knew, that i needed to use the onResult callback but thought in the wrong direction. So your answer actually helped me to get my approach right. I got it to work kind of 95% the way I need it to with this little bit of code to throw away any unwanted results: 

if (value.club_id != verein1){
                        results.splice(index,1)     
                    }

The Problem is though, that I unfortunately had to discover, that the onResult callback is only called for NEW searches. The TokenInput plugin caches searches/results for less server load. So when I enter the first character in my second box, it triggers a search, onResult is called and my results get filtered correctly. So everything seems fine. But if I delete that first character and type it in again, the plugin uses the cached results and onResult DOESN'T get called and the results appear unfiltered. This means, that if I enter a Club in my first box, then search for a Team in the second box, everything gets filtered correctly. BUT if I then decide to remove the Club and enter another one (because I chose the wrong one for example), the results for the teams doesn't get filtered correctly anymore, because the plugin throws in cached searchresults everytime the search string appears twice. By the way: The cached results are the raw, unfiltered ones, not the array of results that made it through my previous filtering.

Now I'm not sure if this is a bug or if it's intended to be this way and my efforts to change the sourcecode of the plugin to change that aren't of any succes either.

Upvotes: 1

David Barlow
David Barlow

Reputation: 4974

Your question could have many different edge cases. Have a look at the tokenInput method 'onResult'.

Maybe you could get the current values from the first input field(input-1) and assess the returned json for input-2 against input-1 and filter out the ones you don't want. You would obliviously have to include the needed id elements for filtering in the json array that rails creates. 

<script type="text/javascript">
        $(document).ready(function() {
            $("#input-1").tokenInput("http://railsapp.com/your/search/action");

            $("#input-2").tokenInput("http://railsapp.com/your/search/action", {
                onResult: function (results) {
                    var input-1 = $("#input-1").val();
                    $.each(results, function (index, value) {
                        // some JS to keep only results which match input-1 values
                    });

                    return results;
                }
            });
        });
        </script>

DISCLAIMER: This is just an idea.

Hope this helps.

Upvotes: 1

Related Questions