1

単純なjQueryUIオートコンプリートがありますが、これは機能していましたが、現在は機能していません。コードは次のとおりです。

<html>
    <head>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

    <script type="text/javascript">
        $(function() {
            $( "#city" ).autocomplete({
                source: function( request, response ) {
                    var cities = new Array();
                    cities.push({"label" : "Chicago", "value" : 1});
                    cities.push({"label" : "Houston", "value" : 2});
                    response(cities);
                },
                focus: function(event, ui) {
                    //console.log(ui.item.label);
                    $(this).text(ui.item.label);
                    //console.log($(this).text());
                    event.preventDefault();
                    //console.log($(this).text());
                },
                select: function(event, ui) {
                    //console.log($(this).text());
                    event.preventDefault();
                    //console.log($(this).text());
                }
            });
        });
    </script>
    </head>
    <body>
      <input id="city" />
    </body>
</html>

フォーカスハンドラーを使用して、値の代わりにテキストボックスにラベルを表示しています（これはオートコンプリートがデフォルトで行うことです）。現在起こっていることは、テキストボックスにラベルも値も表示されておらず、入力した値（「Chi」など）が表示されていることです。

これは機能していましたが、現在は機能していません。他のJavaScriptを含めていて、関数名が衝突したためだと思いました。しかし、上記のように別のHTMLに移動しましたが、まだ機能していません。

ところで、これらのコンソールログステートメントのコメントを外し、ドロップダウンから[シカゴ]を選択すると、すべてがシカゴを出力します。

これはどこかで愚かな間違いのように思えますが、私は困惑しています。助言がありますか？

編集1：ところで、フォーカスを削除してハンドラーを選択すると、オートコンプリートはデフォルトの機能で動作します。

編集2：誰かが自分のコンピューターでこれをテストできれば素晴らしいでしょう

4

2 に答える 2

1

ここで試みているように見えるデフォルトの機能からいくつかの変更があります。

  1. 「完了した」変数が選択されたときにメイン入力でプレビューされるようにします
  2. 選択が行われたときに、値ではなくラベルが表示されるようにします。

これらのどちらも現在機能していない理由は関連していて単純です。<input>フィールドには値が関連付けられているだけで、個別の「ラベル」と「値」はありません。リストから「オートコンプリート」オプションを選択すると、入力されるのは「値」です。

ポイント1の場合、イベントによって更新されている部分は、実際に更新するフィールドの属性であるfocus:ため、に置き換え.text(...)てください。.val(...)<input>

focus: function(event, ui) {
    $(this).val(ui.item.label);
    event.preventDefault();
},

ポイント2の場合、実際にはフィールドに値ではなくラベルを入力する必要があるため、両方に同じテキストを入力するだけで済みます（フラット配列が指定されている場合のデフォルト）。

source: function( request, response ) {
    var cities = new Array();
    cities.push("Chicago");
    cities.push("Houston");
    response(cities);
},

オートコンプリートは常にオプションであることに注意してください。に記入する必要があるのvalue:は、バックエンドで完全に明確にできるものだけです。それはidかもしれませんが、通常、ユーザーが自分で入力した可能性のあるものを使用することは理にかなっています。もちろん、そうしているのであれば、イベントui.item.valueの代わりに使用するのも理にかなっているかもしれません。ui.item.labelfocus:

上記のようにソースを正常にすると、select:イベントを完全に削除できます。

于 2012-09-14T08:28:45.020 に答える
0

問題はオートコンプリートソースの割り当てにあると思います。これは私のために働きます：

$(function() {

    var cities = [ 
        {"label": "Chicago", "value": 1}, 
        {"label": "Houston", "value": 2}
    ];                    


    $( "#city" ).autocomplete({
        source: cities, // assign the source directly
        focus: function(event, ui) {
            //console.log(ui.item.label);
            $(this).text(ui.item.label);
            //console.log($(this).text());
            event.preventDefault();
            //console.log($(this).text());
        },
        select: function(event, ui) {
            //console.log($(this).text());
            event.preventDefault();
            //console.log($(this).text());
        }
    });
});​

これがフィドルです

于 2012-09-14T08:20:46.610 に答える