I want to generate a comma separated auto complete list in my rails application.With my code I am able to achieve only simple auto complete. Please let me know the tweaking in the code to be done so that comma separated auto complete is implemented.
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
});
});
my names come from my view file:
:javascript
names = #{Release.user_names.to_json}
My .rb file
def self.user_names
@@user_names||= User.all.map(&:name)
end
The console output on trying to log names from the .js file:
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>
Please help me out here.
Thanks,
Ramya.
Your code is formated below with demo of Autocompelete code. You can test it seperately. Autocomplete is triggered after the click into input box. Type ‘J’ It will show the months below.
In this autocomplete plugin, Array should be passed as a first argument. Second argument will be settings.