CODEWITHSUNDEEP
jqueryprototypejsscriptaculous
shin
shin

Reputation: 32721

How to change this from Prototype to jQuery?

I want to convert the following Prototype.js to jQuery.

window.onload = function () {
    new Ajax.Autocompleter("function_name", "autocomplete_choices", 
    base_url+"application/ajaxsearch/", {});

    $('function_search_form').onsubmit = function () {
        inline_results();
        return false;   
    }
}

function inline_results() {
    new Ajax.Updater ('function_description', 
    base_url+'application/ajaxsearch', 
    {method:'post', postBody:'description=true&function_name='+$F('function_name')});
    new Effect.Appear('function_description');

}

HTML is the following

<form id="function_search_form" method="post" 
action="http://127.0.0.1/ci_sample/index.php/application/search">
    <div>
        <label for="function_name">Search by function name </label>
        <input type="text" name="function_name" id="function_name" />
        <input type="submit" value="search" id="search_button" />

        <div id="autocomplete_choices" class="autocomplete"></div>
    </div>
    </form>

Upvotes: 1

Views: 572

Answers (2)

fehays
fehays

Reputation: 3167

Probably lots of other ways, but here's what I got.

You might need a plugin for the autocompleter like this: http://docs.jquery.com/Plugins/Autocomplete

The rest of the code would look something like this:

$(document).ready(function(){
 //auto completer code

 $('#function_search_form').submit(function(){
  inline_results();
  return false;
 });
});

function inline_results() {
 $("#function_description").load(base_url + 'application/ajaxsearch', 'description=true&function_name=' + $('#id-of-function_name-element').val());
 $("#function_descritpion").show('normal');
}

You should also consider using .serialize() for the form values.

Upvotes: 0

Sampson
Sampson

Reputation: 268482

You'll need to get an Autocomplete Plugin for the first part, but the rest follows:

$(function(){

  // without knowing the return data, I'm shooting in the dark here
  $.post(base_url+"application/ajaxsearch/", function(results) {
    // pass results (html?) into our 'autocomplete' DIV
    $("#autocomplete_choices").html(results);
  });

  // Handle the form submission
  $("#function_search_form").submit(function(){
    inline_results();
    return false;
  });

});

function inline_results() {
  $.post(base_url+"application/ajaxsearch", {'description':true, 'function_name':$("#function_name").val()}, function(results){
    $("#function_description").html(results).fadeIn("slow");
  });
}

Upvotes: 1

Related Questions