0

このスタック オーバーフローの投稿のおかげで、AutoSuggest という Javascript でオートコンプリートを行うための優れたプラグインを見つけました。

タグを分離するプラグイン (stackoverflow の入力タグ インターフェイスなど)

プラグイン作成者のページへのリンクは次のとおりです。

http://code.drewwilson.com/entry/autosuggest-jquery-plugin

autoSuggest プラグインは、クエリを入力するための入力ボックス (type="text") の幅を 1000px に設定しています。これは、必要以上に広いです。ドキュメント HTML の入力ボックス スタイル プロパティで設定された幅を何らかの形でオーバーライドしています。

<div NAME="divAutoSuggest" ID="divAutoSuggest">
        <input type="text" NAME="editQuery2" ID="editQuery2" wrap="soft" style="margin-left:5px;width:600px;" title="Enter your search query here using plain English"></input>
</div>

また、入力ボックスの定義でcols属性を使用しようとしましたが、それも無視されました。openイベント中に幅の設定をインターセプトすることについて話しているこの別のスタック オーバーフローの投稿を見つけましたが、例はオートコンプリートプラグイン用であり、autoSuggest 用ではありませんでした。

jquery-ui オートコンプリート ウィジェットの幅を個別に変更する

とにかく、このコードを使用して試しました：

$(document).ready
(
function() 
{
    // Put jQuery related initialization code that must occur after the document is ready here.

    $("input[type=text]").autoSuggest
    (
        data.items, 
        {
            selectedItemProp: "name", 
            searchObjProps: "name",
            startText: "Enter Evernote tags here...",
            open: function(event, ui) 
            {
                $(this).autoSuggest("widget").css
                (
                    {
                        "width": 600
                    }
                );
            }
        } // data. items
    ); // $("input[type=text]").autoSuggest
} // function() 
); // $(document).ready

しかし、それもうまくいきませんでした。入力ボックスの幅を設定する方法を誰か教えてもらえますか? オートコンプリート エントリのあるドロップダウン ボックスについて話しているのではなく、オートコンプリート ドロップダウン ボックスをトリガーするテキストを入力するプライマリ入力領域について言及していることに注意してください。

4

1 に答える 1

1

AutoSuggest jQuery Pluginの幅を設定するには、付属の CSSを検索しul.as-selectionsて幅を定義する必要があります。

CSS

ul.as-selections {
  ...
  width: 400px; // define your width
  ...
}

元の CSS を変更していない場合は、次のようになります。

CSS の元の宣言ul.as-selections

ul.as-selections {
 list-style-type: none;
  border-top: 1px solid #888;
  border-bottom: 1px solid #b6b6b6;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  padding: 4px 0 4px 4px;
  margin: 0;
  overflow: auto;
  background-color: #fff;
  box-shadow:inset 0 1px 2px #888;
  -webkit-box-shadow:inset 0 1px 2px #888;
  -moz-box-shadow:inset 0 1px 2px #888;
}
于 2012-05-19T02:48:10.403 に答える