2012-01-04 15 views
1

私は自分のコードで自分のレールアプリケーションでコンマで区切った自動完成リストを生成したいと思います。私のコードでは簡単な自動完成しかできません。コンマで区切られたオートコンプリートが実装されるように、実行するコードの調整を教えてください。複数のjqueryを持つ複数のレールアプリケーションで自動完成

JSコード:

$(document).ready(function() { 
var string1=" "; 
console.log("string1 before ="+string1); 
string1=names.toString(); 
var arrayOfStrings=new Array(); 
arrayOfStrings = string1.split(","); 
console.log("arrayOfStrings is array=="+Array.isArray(arrayOfStrings)); 
console.log("arrayOfStrings ==" + arrayOfStrings); 
$("#release_tester_tokens").autocomplete({ 
       source :arrayOfStrings, 
       matchContains: true, 
     multiple: true,  
     autoFill: true 
    }); 
}); 

私の名前は私のビューファイルから来る:

:javascript 
    names = #{Release.user_names.to_json} 

マイ.rbのファイル

def self.user_names 
    @@user_names||= User.all.map(&:name) 

end 

から名前をログに記録しようとしているのコンソール出力.jsファイル:

names===aaloshious,aarul,aaziz,abaher,abain,abaltean 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
    <title>TestCase Manager - </title> 
    <link href="/stylesheets/general.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/tables.css?1322133776" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/pagination.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/forms.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/tooltips.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/widgets.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/jquery.treetable.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/jquery.autocomplete.css?1324378307" media="screen" rel="stylesheet" type="text/css" /> 

<link href="/stylesheets/formtastic.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/formtastic_changes.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/jquery-ui.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/jquery.tooltip.css?1320900943" media="screen" rel="stylesheet" type="text/css" /> 

    <script src="/javascripts/jquery.min.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery.tokeninput.js?1324370104" type="text/javascript"></script> 
<script src="/javascripts/jquery-ui.min.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/swfobject.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery.rest_in_place.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery_ujs.js?1320900941" type="text/javascript"></script> 

<script src="/javascripts/jquery.dimensions.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery.treetable.js?1323073747" type="text/javascript"></script> 
<script src="/javascripts/jquery.pageless.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery.autoresize.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery.autocomplete.js?1324378273" type="text/javascript"></script> 
<script src="/javascripts/jquery.ba-bbq.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery.tooltip.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery.bgiframe.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/application.js?1325665117" type="text/javascript"></script> 


</head> 
<body> 
    <div id="wrapper"> 
    <div id="content"> 
     <div id="page"> 
     <div id="flash_messages"> 
     </div> 
     <div id="loading_indicator" style="display: none;"> 
      <div> 

      <p class="flash_message">Loading</p> 
      </div> 
     </div> 
     <div class="inner"> 
      <h1></h1> 
      <!-- - testers = User.joins(:role).where('roles.name' => 'Tester') --> 
<!-- -testers=User.find_by_sql("select * from users where id in(select user_id from user_role_assignments where role_id in (select id from roles where name like 'Tester'))") --> 
<!-- - leads = User.joins(:role).where('roles.name' => 'Test Lead') --> 
<!-- TODO: THis should be put in the model. --> 
<form accept-charset="UTF-8" action="/releases" class="formtastic release" id="new_release" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="h1uDwnpSkP3fxLbkGJP6HVm/zvkwDM1cg5aWzbL3Ic0=" /></div> 
    <table class='grid full'> 

    <tr> 
     <td class='grid full_panels' style='width: 50%'> 
<div class="section"><table><tr><td class="tc_left"></td><td class="tc_center" colspan="2"><h2>Edit Release Info</h2><ul class="section_menu"></ul></td></tr><tr class=""><td class="sc_left"></td><td class="sc_center">  
     <fieldset class="inputs"><ol><li class="string required" id="release_name_input"><label for="release_name">Name<abbr title="required">*</abbr></label><input id="release_name" maxlength="255" name="release[name]" type="text" /></li> 
     <li class="select required" id="release_owner_input"><label for="release_owner_id">Owner<abbr title="required">*</abbr></label><select id="release_owner_id" name="release[owner_id]"><option value="1240" selected="selected">sramya</option></select></li> 
     <li class="select required" id="release_project_input"><label for="release_project_id">Project<abbr title="required">*</abbr></label><select id="release_project_id" name="release[project_id]"><option value="1">silver</option> 

     <option value="2" selected="selected">molybdenum</option></select></li> 
     <li class="string optional" id="release_description_input"><label for="release_description">Description</label><input id="release_description" maxlength="255" name="release[description]" type="text" /></li> 
     <li class="string optional" id="release_start_at_input"><label for="release_start_at">Start</label><input class="datepicker" id="release_start_at" name="release[start_at]" type="text" /></li> 
     <li class="string optional" id="release_end_at_input"><label for="release_end_at">End</label><input class="datepicker" id="release_end_at" name="release[end_at]" type="text" /></li> 
     <li class="select optional" id="release_status_input"><label for="release_status">Status</label><select id="release_status" name="release[status]"><option value=""></option> 
     <option value="NOT-STARTED" selected="selected">NOT-STARTED</option> 

     <option value="IN-PROGRESS">IN-PROGRESS</option> 
     <option value="COMPLETE">COMPLETE</option> 
     <option value="CANCELED">CANCELED</option></select></li> 
     </ol></fieldset> 
<fieldset class="buttons"><ol><li class="commit"><input class="create" id="release_submit" name="commit" type="submit" value="Save" /></li> 
</ol></fieldset>  <div class='submit_alternatives'> 
      or 
      <a href="/releases/new">Cancel</a> 

     </div> 
</td><td class="sc_right"></td></tr> 
     <tr><td class="scb_left"></td><td class="scb_center"></td><td class="scb_right"></td></tr></table></div>  </td> 
     <td class='grid full_panels'> 
<div class="section"><table><tr><td class="tc_left"></td><td class="tc_center" colspan="2"><h2>Assign Testers</h2><ul class="section_menu"></ul></td></tr><tr class="table_wrapper"><td class="sc_left"></td><td class="sc_center"><table> 
    <th>Name</th> 
    <label for="release_tester_tokens">Testers</label> 
    <input id="release_tester_tokens" name="release[tester_tokens]" size="30" type="text" /> 

    <!-- /= form.autocomplete_field_tag 'tester_name', :data-autocomplete=>"releases_autocomplete_user_name_path" --> 
    <tr> 
    <td>aaloshious</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="1" /></td> 
    </tr> 
    <tr> 
    <td>aarul</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="2" /></td> 

    </tr> 
    <tr> 
    <td>aaziz</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="3" /></td> 
    </tr> 
    <tr> 
    <td>abaher</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="4" /></td> 

    </tr> 
    <tr> 
    <td>abain</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="5" /></td> 
    </tr> 
    <tr> 
    <td>abalteanu</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="6" /></td> 

    </tr> 
    <tr> 
    <td>abencz</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="7" /></td> 
    </tr> 
    <tr> 
    <td>abennett</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="8" /></td> 

    </tr> 
    <tr> 
    <td>abenoy</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="9" /></td> 
    </tr> 
    <tr> 
    <td>aberkovich</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="10" /></td> 

    </tr> 
    <tr> 
    <td>abhose</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="11" /></td> 
    </tr> 
    <tr> 
    <td>abirchall</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="12" /></td> 

    </tr> 
    <tr> 
    <td>abouchard</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="13" /></td> 
    </tr> 
    <tr> 
    <td>abrezinov</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="14" /></td> 

    </tr> 
    <tr> 
    <td>aburden</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="15" /></td> 
    </tr> 
    <tr> 
    <td>aburt</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="16" /></td> 

    </tr> 
    <tr> 
    <td>acar</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="17" /></td> 
    </tr> 
    <tr> 
    <td>acarver</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="18" /></td> 

    </tr> 
    <tr> 
    <td>acase</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="19" /></td> 
    </tr> 
    <tr> 
    <td>acatana</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="20" /></td> 

    </tr> 
    <tr> 
    <td>achandel</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="21" /></td> 
    </tr> 
    <tr> 
    <td>achandrasekaran</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="22" /></td> 

    </tr> 
    <tr> 
    <td>achaudhary</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="23" /></td> 
    </tr> 
    <tr> 
    <td>achen</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="24" /></td> 

    </tr> 
    <tr> 
    <td>acheng</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="25" /></td> 
    </tr> 
    <tr> 
    <td>acohen</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="26" /></td> 

    </tr> 
    <tr> 
    <td>acompagnoni</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="27" /></td> 
    </tr> 
    <tr> 
    <td>aczegledi</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="28" /></td> 

    </tr> 
    <tr> 
    <td>adandy</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="29" /></td> 
    </tr> 
    <tr> 
    <td>adavoren</td> 
    <td><input id="release_tester_ids_" name="release[tester_ids][]" type="checkbox" value="30" /></td> 

    </tr> 
</table> 
</td><td class="sc_right"></td></tr> 
     <tr><td class="scb_left"></td><td class="scb_center"></td><td class="scb_right"></td></tr></table></div>  </td> 
    </tr> 
    </table> 
</form> 
<!-- /=will_paginate @testers --> 
<!-- /[email protected]=["sramya","scharron"] --> 
<script> 
    //<![CDATA[ 
    names = ["aaloshious","aarul","aaziz","abaher","abain","abalteanu","abencz","abennett","abenoy","aberkovich","abhose","abirchall","abouchard","abrezinov","aburden","aburt","acar","acarver","acase","acatana","achandel","achandrasekaran","achaudhary","achen","acheng","acohen","acompagnoni","aczegledi","adandy","adavoren","adaya","adehili","adesai","adevrieze","adewhurst","adweb","aedwards","aelsom","sramya"] 
    //]]> 
</script> 
<script src="/javascripts/jquery.js?1320900941" type="text/javascript"></script> 

<script src="/javascripts/jquery-ui.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/jquery_ujs.js?1320900941" type="text/javascript"></script> 
<script src="/javascripts/application.js?1325665117" type="text/javascript"></script> 

      <div class="clearfix"></div> 
     </div> 
     </div> 
     <div id="sidebar" class="sidebar"></div> 
     <div class="clearfix"></div> 

     <div id="footnotes_holder"></div> 
    </div> 
    <div id="footer"> 
     <div id="footer_inner"> 
     <dl class="quick_links"> 
      <dt><strong>Portal Navigation</strong></dt> 
      <dd> 
      <ul> 

       <li><a href="/">Home</a></li> 
       <li><a href="/projects">Projects</a></li> 
       <li><a href="/ics">ICs</a></li> 
       <li><a href="/reports">Reports</a></li> 
      </ul> 
      </dd> 
     </dl> 

     <dl class="copy"> 
      <dt><strong>TestCase Manager Portal</strong></dt> 
      <dd> 
      <ul> 
       <li>Signed in as sramya (TesterTest Lead)</li> 
       <li><a href="/user/sign_out">Sign out</a></li> 
      </ul> 

      </dd> 
     </dl> 
     </div> 
    </div> 
    </div> 
</body> 
</html> 

私をここで助けてください。 ありがとう、 Ramya。

答えて

1

あなたのコードはAutocompeleteコードのデモで整形されています。あなたはそれを別々にテストすることができます。オートコンプリートは、クリック入力ボックスの後にトリガされます。 「J」と入力します。以下の月が表示されます。

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<style> 
ul li{ list-style-type:none;} 
</style> 
<script src="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    var string1 = "January,Febrauary,March,April,May,June,July,August,September,October,November,December"; 
    console.log("string1 before =" + string1); 
    var arrayOfStrings = string1.split(","); 
    console.log("arrayOfStrings is array==" + Array.isArray(arrayOfStrings)); 
    console.log("arrayOfStrings ==" + arrayOfStrings); 
    $("#release_tester_tokens").click(function(){showAutocomplete(arrayOfStrings);}); 
}); 
function showAutocomplete(arrayOfStrings) { 
    $("#release_tester_tokens").autocomplete(arrayOfStrings,{  
     width: 320, 
     max: 4, 
     highlight: false, 
     multiple: true, 
     multipleSeparator: " ", 
     scroll: true, 
     scrollHeight: 300 
    }); 
    }; 
</script> 
</head> 
<body> 
Month:<input type="text" id="release_tester_tokens" name="release_tester_tokens" value=""/> 
</body> 
</html> 

このオートコンプリートプラグインでは、Arrayを最初の引数として渡す必要があります。第二引数は設定です。

+0

こんにちはUmeshありがとうございました。私のセットアップの問題は、配列がJsonの形であることです。したがって、source:Arrayオプションを指定して作業するだけです。 – ramya

+0

JSONファイルには何がありますか?サンプルJSONの構造を提供します。だから、私はあなたを正しく導くことができます:) –

+0

こんにちはUmesh私はJSONの構造で私の質問を編集しました。これは、最初の引数として配列を渡すとテキストボックスに文字を入力するエラーです。this.sourceは関数ではありません _search()jquery ... 0900941(行5216) value = "a" search()jquery ... 0900941(line 5209) value = "a" イベント=オブジェクト{originalEvent =イベントキーダウンタイプ、 "keydown"など} (?)()jquery ... 0900941(5014行目) [このエラーで中断する] this.source({term:value}、this.response); – ramya

関連する問題