2

オートコンプリート機能を追加するテキスト ボックスがあります。入力を開始すると、データベースが検索され、適切なコンテンツが返されます/絞り込まれます。ユーザーが返されたリストから選択すると... 画像とその他の情報が返され、ページに配置されます。よく働く。下記参照：

jQuery(function ($) {
var a = $('#artistName').autocomplete({ 
    serviceUrl: '/link/to/processor.ashx?action=artist',
    minChars:1, 
    maxHeight:400,
    width:300,
    zIndex: 9999,
    deferRequestBy: 0, 

    // callback function:
    onSelect: function(value, data){ 
        if (data) {
            var artistData = data.split('|');
            var src = '<%= ImageServer %>' + '/path/to/image/' + value + '.jpg';
            $("#artistPhoto").attr('src', src);
            $('#artistExt').remove();

            if (artistData[1] !== undefined && artistData[1] != 0) {
                $("#artistSection").append('<div id="artistExt"><span>Contact me @</span> 1-888-123-4567 Ext: ' + artistData[1] + '</div>');
            }
        }
    }
});    
});

私がやろうとしているのは、ユーザーがリストから選択しない場合に同じ機能を提供することです(たとえば...ユーザーは「Bill」のような名前を入力し始めると、オートコンプリートは「Bill」を返します...しかし、ユーザーは返された結果リストから「Bill」を選択せず​​、代わりに名前を入力するだけです...イベントが onSelect 関数上にあるため、明らかに何も起こりません)。

イベントonSelect、onChange、onLoad、onKeyUp、on[enter]などを発生させる方法でこれを書く方法を誰かが理解するのを手伝ってくれますか? 値/長さを探すだけの方が良いですか? また、ユーザーがページに入り、テキスト ボックスが事前に入力されている場合に発生する可能性があるシナリオもあります。この場合、onSelect関数と同じ表示変更をしてほしいです。

どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

0

これはちょっとしたハックですが、うまくいきます。

オートコンプリートを設定する前に、変数を追加します。

var firstitem = null;

openこのコードを使用して、オートコンプリートにオプションを追加します。

open : function (event, ui) {
  firstitem = j$(j$("#SelectProject").data("autocomplete").menu.element.children().first()[0].innerHTML).html();
}

オートコンプリートを定義したら、ぼかしイベントをオートコンプリート入力にバインドします。

.bind("blur", function () { j$(this).val(firstitem); } );

最終結果は次のようになります。

jQuery(function ($) {

  var firstitem = null;
  var a = $('#artistName').autocomplete({
      serviceUrl : '/link/to/processor.ashx?action=artist',
      minChars : 1,
      maxHeight : 400,
      width : 300,
      zIndex : 9999,
      deferRequestBy : 0,

      // callback function:
      onSelect : function (value, data) {
        if (data) {
          var artistData = data.split('|');
          var src = '<%= ImageServer %>' + '/path/to/image/' + value + '.jpg';
          $("#artistPhoto").attr('src', src);
          $('#artistExt').remove();

          if (artistData[1] !== undefined && artistData[1] != 0) {
            $("#artistSection").append('<div id="artistExt"><span>Contact me @</span> 1-888-123-4567 Ext: ' + artistData[1] + '</div>');
          }
        }
      },

      open : function (event, ui) {
        firstitem = j$(j$("#SelectProject").data("autocomplete").menu.element.children().first()[0].innerHTML).html();
      }
    }).bind("blur", function () { j$(this).val(firstitem); } );

});

また、詳細については、selectFirstプラグイン、autoFocus オプション、およびオープン イベントのドキュメントを参照してください。

于 2012-10-16T15:14:28.560 に答える