当前位置： 文江博客话题详情

在 Rails 应用程序中使用 jquery 自动完成多个

发布于 2024-12-24 01:04:21 字数 17401 浏览 0 评论 0原文

我想在我的 Rails 应用程序中生成一个逗号分隔的自动完成列表。使用我的代码，我只能实现简单的自动完成。请让我知道要对代码进行的调整，以便实现逗号分隔的自动完成。

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 -->
<!-- /-@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>

请在此处帮助我。 谢谢， 拉姆亚。

原文

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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

此生挚爱伱 2024-12-31 01:04:21

您的代码格式如下，带有自动完成代码演示。你可以单独测试一下。单击输入框后会触发自动完成。输入“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>

在此自动完成插件中，数组应作为第一个参数传递。第二个参数是设置。

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.

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

In this autocomplete plugin, Array should be passed as a first argument. Second argument will be settings.

回复 原文
~没有更多了~

关于作者

稚然

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

佚名

文章 0 评论 0

羁客

文章 0 评论 0

天天爱笑的徐老师

文章 0 评论 0

星

文章 0 评论 0

夏日落

文章 0 评论 0

隐诗

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文