我想在我的rails应用程序中生成逗号分隔的自动完成列表。使用我的代码，我只能实现简单的自动完成。请让我知道要完成的代码中的调整，以便实现逗号分隔自动完成。
js code：
$(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="✓" /><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 -->
<!-- /-@names=["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>
请帮帮我。 谢谢， 拉姆亚。
答案 0 :(得分：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应作为第一个参数传递。第二个参数将是设置。