jquery-tokeninput を使用して、ユーザーがリンク済みの友達や Facebook の友達を検索して選択できるようにしました。
私たちは多くの問題に直面しています
ユーザーがボックスへの入力を開始すると、テキスト ボックスがオレンジ色のボックスで強調表示されます。ただし、このオレンジ色のボックスはテキスト ボックスを完全に覆っているわけではなく、テキストの周りのテキスト ボックスの一部のみを覆っています。この問題が jQuery-tokeninput と ruby コードの構成の不一致によるものかどうかは不明です。
テキストボックスの現在の入力位置を示すポインターが表示されないことがあります。これは、ユーザーがテキスト ボックスをクリックしても、そのようなポインター (点滅する | ライン) が表示されない場合に発生します。
http://imgur.com/ii6df3Lはスクリーンショットの 1 つ http://imgur.com/7HId3id、 imgur.com/8KIXpa0 はスクリーンショットの他の画像です。
以下は、erb ファイルと rb ファイルで使用したコードです。
<div data-role="content">
<%= form_tag(compose_referral_message_facebook_page_path, {:method => "get", "data-ajax" => false}) do %>
<%= hidden_field_tag :job_posting_id, params[:job_posting_id] %>
<%= hidden_field_tag :facebook_friend_list %>
<%= label_tag(:att_uid, "Employee ID*") %>
<%= text_field_tag(:att_uid, params[:att_uid], :placeholder => "Enter your ATTUID*") %>
<%= label_tag(:to, "Search Connections by Name") %>
<div data-role="content">
<input type="text" id="facebook_friend_search_box_id", placeholder="Search Connections by Name"/>
</div>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button id="facebook_friend_submit_button_id" type="submit" data-theme="b">
Continue
</button>
</div>
<div class="ui-block-b">
<%= link_to "Cancel", show_jobs_page_url(:job_posting_id => params[:job_posting_id]), {"data-role" => "button", "data-theme" => "c"} %>
</div>
</fieldset>
</div>
<% end %>
提案テキストボックスのコードは
<div data-role="content">
<input type="text" id="facebook_friend_search_box_id", placeholder="Search Connections by Name"/>
</div>
および対応する論理ファイルを含む
$(document).ready(function() {
if ($("#facebook_friend_search_box_id").length !== 0) {
return $("#facebook_friend_search_box_id").tokenInput("search_facebook_friend");
}
});