カテゴリー: AutoComplete

テキストボックスに最初の何文字かを入力すると、それにマッチする候補リストを表示します。

[ コードサンプル ]

        // ++++ 港名サジェスト ++++ //
        // == 日本 == //
        /* テキストボックスのidに対して、autocompleteを設定 */
        $('#ldnm').autocomplete({
          //minLength: 3, <== 必要に応じてセット、デフォルトは1
          source: function (req, resp) {
            
            /* 検索レスポンスを返すサーブレットにaJaxでリクエスト 
               レスポンスはJSON型式文字列配列
            */
            $.ajax({
              url: "GetASItems",
              type: "POST",
              cache: false,
              dataType: "json",
              data: {tp: 'exp', jf: 'j', ldlk: $('#ldnm').val(), dclk: '', cntrycd: curcntrycd, dcnm: $('#dcnm').val()},
              success: function (o) {
                resp(o);
              },
              error: function (xhr, ts, err) {
                resp(['']);
              }
            });
          }
        });
        // == 海外 == //
        $('#dcnm').autocomplete({
          source: function (req, resp) {
            $.ajax({
              url: "GetASItems",
              type: "POST",
              cache: false,
              dataType: "json",
              data: {tp: 'exp', jf: 'f', ldlk: '', dclk: $('#dcnm').val(), cntrycd: curcntrycd, ldnm: $('#ldnm').val()},
              success: function (o) {
                resp(o);
              },
              error: function (xhr, ts, err) {
                resp(['']);
              }
            });
          }
        });

[ 画面例 ]