web-dev-qa-db-ja.com

jQuery UIオートコンプリート-ホバーするとメニューが消えます

私は、jQuery UIオートコンプリートを使用して、MySQLデータベース内の人々の名前のリストを表示しようとしています。基本的な機能は機能しています-2文字以上を入力すると、可能な名前のリストが表示されますが、リストの上にマウスを移動するか、下キーを押してリストにアクセスすると、表示されなくなります（下の2つのスクリーンショットが役立つ場合がありますこれを説明してください）。

これは、リストに実際にアクセスできないため、オートコンプリートが無意味になることを意味します！誰かが助けてくれるなら、私は最も感謝しています！スクリーンショットとコードは以下に掲載されています。

最初の数文字を入力すると、メニューが表示されます

Screenshot 1

しかし、マウスをホバーするか、「下」キーを押すと、選択ができる前に消えます

Screenshot 2

HTML：

  <div id="chooseaccount">
  Choose Account to Edit
  <div id="iechooseaccountlabel" class="labeldiv">
    <!--[if IE]>
     Enter Student Name
    <![endif]-->
   </div>

  <input type="text" class="inputs" id="editname" placeholder="Enter Student Name" />

  </div>

jQuery：

$(document).ready(function(){

$("#editname").autocomplete({
 source: "names.php",
 minLength: 2,
});

});

PHP：

<?php  

$mysqli = new mysqli('********', '********', '**********', '*********');
$text = $mysqli->real_escape_string($_GET['term']);

$query = "SELECT name FROM users WHERE name LIKE '%$text%' ORDER BY name ASC";
$result = $mysqli->query($query);
$json = '[';
$first = true;
while($row = $result->fetch_assoc())
{
if (!$first) { $json .=  ','; } else { $first = false; }
$json .= '{"value":"'.$row['name'].'"}';
}
$json .= ']';
echo $json;

?>
jqueryhtmljquery-uijquery-ui-autocomplete
60
Chris

このエラーは、two jQuery UIファイルが同時にクライアントのブラウザーにロードされるときに発生する競合のために発生します。 <head>セクションでは、おそらく2つの異なるjQuery UIファイルが参照されていることがわかります。削除するだけで機能します。

198
bicycle

このエラーは、2つのjQuery UIファイルがブラウザーに同時に読み込まれると発生します。これにより、jqueryの競合が発生する可能性があります。エラーを解決するには、未使用のjquery UIファイルを削除します。

私の場合、jquery-ui.min.jsファイルはassetsフォルダから意図せずに含まれていました。それを削除するには、config/main.phpのコンポーネントに1つのコードを追加しました

     'clientScript' => array(
        'scriptMap' => array(
            'jquery-ui.min.js' => false,
        )),
4
rushil

私は同じ問題を抱えていましたが、一度にDOMにjquery-uiスクリプトタグを1つしか持っていませんでした。スクリプトタグを含むコンテンツをAjaxでロードしていました。 1ページで2回行うと、2番目のリクエストのコンテンツが最初のリクエストのコンテンツを置き換えていたとしても、オートコンプリートドロップダウンが壊れます。 1つの回避策は、jquery-uiスクリプトを含むコンテンツをレンダリングする前に次の行を追加することです。

$.ui = null;

4
regularmike

ヘッダーにロードされるjqueryファイルにはすべてのUI要素が含まれ、ファイルに自動的に追加されるjqueryファイルには、アップロードする必要のないchildren要素があるため、削除する必要があります。

1
user5642741

同じ問題があり、jquery UIを2回使用しませんでした。jqueryUIはjquery DataTableの一部でした。
次のコードで問題が解決しました
注：このコードでは、ULをクリックしない場合にULを閉じるコードを記述する必要があります

$(".gettingContactList").autocomplete({
     source:this.contactList,
     /*following focus function was written because when mouse
     was being hovered over the menu, the menu was disappearing*/
    focus:function(e,ui) { 
      $(e.toElement).parents().show()
    }
})
1
Akshay Vijay Jain

先行入力で同様の問題が発生しました

Focus（）を使用して、問題を解決しました。

例：

$(ele).typeahead({source: $scope.varMap['abc'], items: undefined});
$(ele).focus();
0
Mohit Kanojia