如何将这个从Prototype更改为jQuery？

Question

我想将以下Prototype.js转换为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如下

<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>

Answer 1

你需要为第一部分获得一个Autocomplete Plugin，但其余部分如下：

$(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");
  });
}

Answer 2

可能还有很多其他方式，但这就是我得到的。

您可能需要一个自动完成器插件，如下所示：http://docs.jquery.com/Plugins/Autocomplete

其余的代码看起来像这样：

$(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');
}

您还应该考虑使用.serialize（）作为表单值。