(I'm just) thinking out loud

First create a button or link that triggers the Bootstrap Modal. And In that link the "data-target " should point to Bootstrap Modal and you also need to provide an href attribute that  should point to a controller#action using routes. <!-- Button trigger modal --> <a  href = "/page_to_fetch_remote_content/" class= "btn btn-primary btn-lg" data-toggle= "modal" data-target= "#myModal" > Launch demo modal </a> <!-- Modal --> <div class= "modal fade" id= "myModal" tabindex= "-1" role= "dialog" aria-labelledby= "myModalLabel" aria-hidden= "true" > <div class= "modal-dialog" > <div class= "modal-content" > <div class= "modal-header" > <button type= "button" class= "close" data-dismiss= "modal" aria-hidden= "true" ...

Here is a nice way to use "keyup" for ajax requests with a delay. That allows user to type in the whole word and using delay we can limit the number of server requests. var interval = null; $('input#input_id').on('keyup', function() { var text = this.value; clearTimeout(interval); interval = setTimeout(function() { if(text){ $.ajax({ url: "/page/", data: { q: text.trim() }, dataType: "script" }); } }, 600) });