如何啓動jQuery自動完成中的更改事件

我希望用戶能夠輸入自動完成的文本框，但如果未找到它，我希望它提交已寫入的文本而不是值（在這個例子中是projectId）。我目前的想法是捕獲變化事件（查看註釋掉的代碼），然後更新隱藏字段，該字段將通過模型綁定傳遞給ASP.NET MVC控制器。如何啓動jQuery自動完成中的更改事件

我的JavaScript看起來像這樣：

$(function() { 

     $('*[data-autocomplete-url]') 
     .each(function() { 
      $(this).autocomplete({ 
       source: $(this).data("autocomplete-url"), 
       minLength: 2, 
       select: function (event, ui) { 
        $(this).next('input:hidden').val(ui.item.value); 
        $(this).val(ui.item.label); 
        return false; 
       }, 
       focus: function (event, ui) { 
        $(this).next('input:hidden').val(ui.item.value); 
        $(this).val(ui.item.label); 
        return false; 
       }, 
       change: function (event, ui) { 
        alert(ui.item.value); 

        //if (ui.item.value == null) { 
        // $(this).next('input:hidden').val(ui.item.label); 
        //} 
       } 
      }); 
     }); 
    });

我的HTML看起來像這樣：

<label for="ProjectID">Project</label> 
<input type='text' data-autocomplete-url='/Projects/GetProjectsByUser' />\ 
<input id="ProjectID" name="ProjectID" type="hidden" value="" />

變化事件不射擊 - 任何想法，爲什麼？

來源

2012-07-22 Rob Ellis

因爲每次擊鍵有 - 有變化？ – 2012-07-22 08:05:29

如果您在輸入框中添加了名稱屬性，會發生什麼情況？ – Red 2012-07-22 08:16:50

對不起，安德烈亞斯，我的意思是不解僱。 – 2012-07-22 09:27:28

我認爲這有幾個問題。

change當字段模糊時觸發事件，如果值已更改，則不會按鍵。
看起來有一個選擇器的問題，如果你添加類或id到你的輸入，它的工作原理。
ui.item在警報報告爲空，所以ui.item.value根本不會觸發警報框。相反，我把$（this）.val（），最後它返回插入的文本。

這裏是我的些許變化代碼：

<label for="ProjectID">Project</label> 
<input class.='ac' type='text' data-autocomplete-url='/Projects/GetProjectsByUser' /> 
<input id="ProjectID" name="ProjectID" type="hidden" value="" /> 

$(function() {  
    $('.ac').each(function() { 
     $(this).autocomplete({ 
      source: $(this).data("autocomplete-url"), 
      minLength: 2, 
      select: function (event, ui) { 
       alert('se'); 
       $(this).next('input:hidden').val(ui.item.value); 
       $(this).val(ui.item.label); 
       return false; 
      }, 
      focus: function (event, ui) { 
       alert('f'); 
       $(this).next('input:hidden').val(ui.item.value); 
       $(this).val(ui.item.label); 
       return false; 
      }, 
      change: function (event, ui) { 
       alert($(this).val()); 
      } 
     }); 
    }); 
});

來源

2012-07-22 14:36:14 Goran

如何啓動jQuery自動完成中的更改事件

回答

相關問題