1

ユーザーがタグのリストにタグを追加できるようにするフォーム入力フィールドのオートコンプリートを作成しました。ユーザーが提案のいずれかを選択した場合、ページを使用して、ページをリロードせずにすでに存在するタグのセクションに新しいタグを追加します。

これを3つのシナリオで実現したいと思います。

  1. ユーザーはタグを入力し、オートコンプリートの提案を無視して、Enterキーを押します。
  2. クエリの任意の部分を入力した後、ユーザーは矢印キーを使用してオートコンプリート候補の1つを選択し、Enterキーを押します。
  3. クエリの任意の部分を入力した後、ユーザーはオートコンプリート候補の1つをマウスでクリックします。

シナリオ1を完璧に機能させることができました。ただし、シナリオ1と2ではページがリロードされますが、それでもタグはリストに追加されません。

シナリオ1と2は、どちらも同じ関数によって呼び出されます。

$j("#addTag").autocomplete({
  serviceUrl:'/ac',
  onSelect: function(val, data){
    addTag(data);
  }
});

そして、これがaddTag（）のコードです：

function addTag(tag){
  var url = '/addTag/' + tag;

  //Call the server to add the tag/
  $j.ajax({
    async: true,
    type: 'GET',
    url: url,
    success:function(data){
      //Add the tag to the displayed list of already added tags
      reloadTagBox(data);
    }, 
    dataType: "json"
  });

  //Hide the messages that have been displayed to the user
  hideMessageBox();
}

シナリオ1コード：

function addTagByLookup(e, tag){
  if(e && e.keyCode == 13)
  {
    /*This stops the page from reloading (when the page thinks 
      the form is submitted I assume).
    */
    e.preventDefault();
    //If a message is currently being displayed to the user, hide it
    if ($j("#messageBox").is(":visible") && $j("#okayButton").is(":visible")){
      hideMessageBox();
    }

    else{  
      //Give a message to the user that their tag is being loaded
      showMessageBox("Adding the tag <strong>"+tag+"</strong> to your station...",'load');

      //Check if the tag is valid
      setTimeout(function(){
        var url = '/checkTag/' + tag;
        var isTagValid = checkTag(tag);

        //If the tag is not vaid, tell the user.
        if (isTagValid == false){
          var message = "<strong>"+tag+"</strong>"+
                      " was not recognized as a valid tag or artist. Try something   else.";
          //Prompt the user for a different tag
          showMessageBox(message, 'okay');
        }

        //If the tag is valid
        else{
          addTag(tag);
        }
      }, 1000);
    }
  }
}

シナリオ1の通常のフォーム送信にe.preventDefault機能を使用したことは知っていますが、他のシナリオで機能させることができないようで、それが本当の問題であるかどうかさえわかりません。

私はMVCとしてパイロンを使用しており、オートコンプリートにはこのチュートリアルを使用しています。

4

1 に答える 1

0

ですから、誰かが知りたがっている場合に備えて、私の問題は、そもそも決して持っていなかったはずの簡単な解決策でした。

私の入力タグは、入力タグがアクティブ化されるたびに送信されるフォームに埋め込まれていました。

シナリオ1では、ユーザーがEnterキーを押したときにデフォルトのイベントが発生しないようにすることで、この問題を回避しました。しかし、jQueryイベント.autocomplete（）でこのイベントにアクセスできなかったため、それを防ぐことはできませんでした。

于 2012-06-22T15:08:46.490 に答える