當將SPAN替換爲INPUT時，JQuery Autocpomplete不起作用

Question

我有一個使用自動完成功能的輸入字段。當我只做到這一點時，自動完成工作。但是：我想顯示一個範圍並在用戶點擊時將其替換爲輸入框。不幸的是，自動完成功能打破了。考慮到以下代碼：

$(function() { 

    $('#my_span').live('click', function() { 
     var input = $('<input />', {'type': 'text', 'id': 'my_input', 'name': 'my_input', 'value': $(this).html()}); 
     $(this).parent().append(input); 
     $(this).remove(); 
     input.focus(); 
    } 


    ); 

    $('#my_input').live('blur', function() { 
     $(this).parent().append($('<span />' , {'id': 'my_span'}).html($(this).val())); 
     $(this).remove(); 
    }); 
}); 

$("#my_input").autocomplete({ 
     source: function(req, resp) { 
      $.getJSON("http://localhost/grootjeframework/testproject/json/find/partij/naam/" + encodeURIComponent(req.term), resp); 
     }, 

     select: function(event,ui){ 
      //do Stuff 
     } 
    }); 

（編輯認爲我的HTML跨度爲span元素;）所以我不能發佈它。對於您的信息：它只是一個ID爲'my_span'的正常範圍）

輸入和量程的更換工作正常。自動完成，沒有替換腳本，工作也很好。但是，結合兩者，自動完成功能就會中斷。

Answer 1

'my_input'僅在'my_span'單擊時創建，所以當您附加'blur'事件處理程序和自動完成插件時，它還不存在。

嘗試做這樣的事情：

$(function() { 

$('#my_span').live('click', function() { 
    var input = $('<input />', {'type': 'text', 'id': 'my_input', 'name': 'my_input', 'value': $(this).html()}); 

    input.live('blur', function() { 
     $(this).parent().append($('<span />' , {'id': 'my_span'}).html($(this).val())); 
     $(this).remove(); 
    }); 

    input.autocomplete({ 
     source: function(req, resp) { 
      $.getJSON("http://localhost/grootjeframework/testproject/json/find/partij/naam/" + encodeURIComponent(req.term), resp); 
     }, 

     select: function(event,ui){ 
      //do Stuff 
     } 
    }); 

    $(this).parent().append(input); 
    $(this).remove(); 
    input.focus(); 
}); 

}）;

通過這種方式，您可以在元素創建後附加事件處理函數和自動完成元素。

Leonti

Answer 2

感謝Leonti，我可以完成我的任務。我在下面編輯瞭解決方案。從現在開始，在單擊JSON項目列表中的項目後，輸入框會在一個範圍內更改。

$(function() { 

    $('#my_span').live('click', function() { 
     var input = $('<input />', {'type': 'text', 'id': 'my_input', 'name': 'my_input', 'value': $(this).html()}); 

     input.autocomplete({ 
      source: function(req, resp) { 
       $.getJSON("http://localhost/grootjeframework/testproject/json/find/partij/naam/" + encodeURIComponent(req.term), resp); 
      }, 

      select: function(event,ui){ 
       $("#id_partij_samengevoegd").attr("value", ui.item.id); 
       $('#my_span').remove(); 
       input.parent().append($('<span />' , {'id': 'my_span'}).html(ui.item.value)); 
       input.remove(); 
      } 
     });  

     $(this).parent().append(input); 
     $(this).remove(); 
     input.focus(); 
    }); 

});