4

私はこれに関するグーグルの投稿をたくさん見ますが、すべてがこれがどのように進行しているかについて話しているようです。テキストをクリックしてテキストボックスを取得し、そのテキストボックスに対してオートコンプリート機能を使用できるように、jeditable機能とオートコンプリート機能の動作バージョンを知っている人はいますか？

編集：これらのソリューションのどれもスタックオーバーフロータグ+ jeditableを複製していないように見えるので、私は賞金を開いています。テキストをクリックした後、jeditableを使用して編集可能なtexboxを取得し、それぞれをオートコンプリートするコンマ区切りのリストを入力できますiタイプとしてのエントリ（スタックオーバーフローにタグを入力するのと同様）。

4

6 に答える 6

13

これを見てください

JQueryベースのインプレース編集+オートコンプリート

使用法 

$('#edit').editable( 'echo.php', // POST URL to send edited content
    { indicator : , // options for jeditable 
        event: 'click'      // check jeditable.js for more options
    },
    { url: "search.php", //url form where autocomplete options will be extracted
        minChars: 1, // check autocomplete.js for more options
        formatItem:formatItem,
        selectOnly: 1,
        inputSeparator:';' // a new option of inputSeparator was introduced. 
    }
);

'、'を入力区切り文字として使用できます。

于 2009-09-22T06:25:10.410 に答える
11

これこそが、Jeditable カスタム入力の目的です。手早く簡単に 動作するデモを確認してください (文字aで始まる何かを入力し始めます)。

デモは 5 行のコードで行われました。オートコンプリートには Jörn Zaefferer のAutocomple プラグインを使用します。

$.editable.addInputType('autocomplete', {
    element : $.editable.types.text.element,
    plugin : function(settings, original) {
        $('input', this).autocomplete(settings.autocomplete.data);
    }
});

次に、次のような方法で Jeditable を呼び出すことができます。

$(".autocomplete").editable("http://www.example.com/save.php";, {
    type      : "autocomplete",
    tooltip   : "Click to edit...",
    onblur    : "submit",
    autocomplete : {
        multiple : true,
        data     : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
    }
});
于 2009-09-29T11:22:06.407 に答える
4

コンマで区切られた電子メールのリストのために、bassistance の jeditable と autocomplete で同じ機能が必要でした。そこで、デモを Mika Tuupola から変更し、次のように動作させました。

$.editable.addInputType('autocomplete', {
    element: $.editable.types.text.element,
    plugin: function(settings, original) {
        $('input', this).autocomplete(settings.autocomplete.urlOrData,
            settings.autocomplete.options);
    }
});

jEditable を呼び出すときは、次を追加する必要があります。

$('.autocomplete').editable('http://www.example.com/save', {
    type: 'autocomplete',
    autocomplete: {
        urlOrData: ["Aberdeen", "Ada", "Adamsville"] , // can also be url: 'http://www.example.com/autocomplete',
        options: {
            multiple: true
        }
    }
});

ここで理解しておくべき基本的なことは、 $('input', this).autocomplete(...) を呼び出すと、実際にはオートコンプリート プラグイン機能を編集可能な入力に適用していることです。これは、jeditable に渡す設定と同じです。

于 2010-02-16T18:51:35.610 に答える
2

編集可能：jQuery jeditable最近プロジェクトで使用しました（ページメソッドを操作するために少し変更を加えました）

オートコンプリート：ベーシスタンス

于 2009-09-22T06:28:06.130 に答える
1

これを jQuery UI と組み合わせても、上記の Mika の例と大差ありません。これは私のために働く

  $.editable.addInputType('autocomplete', {
      element : $.editable.types.text.element,
      plugin : function(settings, original) {
          $('input', this).autocomplete(settings.autocomplete);
      }
  });

  $(".autocomplete").editable("http://www.example.com/save.php", {
      type      : "autocomplete",
      tooltip   : "Click to edit...",
      onblur    : "submit",
      autocomplete : {
          minLength  : 2,
          source     : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
      }
  });
于 2011-02-19T20:46:42.420 に答える