如何在選擇自動填充建議後停止頁面重新加載

我爲表單輸入字段創建了自動填充功能，允許用戶將標籤添加到列表中。如果用戶選擇了任何建議，我希望網頁使用將新標記添加到已存在的標記部分，而無需重新加載頁面。如何在選擇自動填充建議後停止頁面重新加載

我想這3個場景發生：

標籤中的用戶類型，忽略自動完成建議，並按下回車。
輸入查詢的任何部分後，用戶使用箭頭鍵選擇其中一個自動填充建議並按下回車鍵。
輸入查詢的任何部分後，用戶用鼠標單擊其中一個自動填充建議。

我已經能夠使場景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); 
    } 
    } 
}

我知道我使用e.preventDefault功能爲情景1中的正常表單提交，但我似乎無法使其w與其他場景相比，我甚至不確定這是真正的問題。

我使用掛架作爲MVC，並使用this tutorial作爲自動完成。

來源

2012-06-21 KStensland

我想我診斷了這個問題。我很確定這是輸入標籤提交。每當頁面重新加載時，url的尾部都會添加「？newTag = [value]」。我會更新我找到的任何解決方案。 – KStensland

另外，當我做場景2時，它會經歷場景1直到addTag（）函數的第一行之前。 – KStensland

因此，如果有人想知道，我的問題有一個簡單的解決方案，我應該從來沒有擺在首位。

我的輸入標籤嵌入在每次激活輸入標籤時提交的表單中。

我已經通過防止用戶按下Enter鍵時發生默認事件而在方案1中停止了此問題。但是因爲我沒有在jQuery事件.autocomplete（）中訪問這個事件，所以我無法阻止它。

來源

2012-06-22 15:08:46 KStensland

如何在選擇自動填充建議後停止頁面重新加載

回答

相關問題