從ajax響應創建一些對象

Question

我想用ajax做一個遠程autosuggest，並且在使用onclick函數時遇到麻煩。我收到的Ajax響應簡直是像

One Name 
Another Name 

相隔\ n

所以下面是我到目前爲止所。它存在的問題：代碼非常難看，// /////////////之間的界限不起作用。顯然它會保存對變量的引用，並且所有元素都將文本輸入填入最後一個元素的值。

任何人都可以幫我解決這個問題嗎？要麼只是將字符串的副本傳遞給該函數定義，要麼提示，鏈接或任何以正確方式執行此操作的任何方式都將受到高度讚賞。

感謝

<script type="text/javascript"> 
    $('.suggestable').live('keyup', (function() { suggest(this); })); 

    function suggest(inputTextField) 
    { 
     var inputString = inputTextField.value; 
     var lookFor = $(inputTextField).attr('data-lookfor'); 

     if(inputString.length == 0) { 
//   $('#suggestions').fadeOut(); 
     } else { 
      $.post(AjaxVars.url, 
       { 
        action: 'suggest-submit', 
        queryString: ""+inputString+"", 
        lookFor: ""+lookFor+"" 
       }, 
       function(data) 
       { 
        // Clear the target div in a very very ugly way 
        document.getElementById('suggestionsList').innerHTML = ""; 
        var myul = document.createElement('ul'); 
        data = data.split("\n"); 
        for(var index in data) 
        { 
         elem = data[index]; 
         if(elem.length > 0) 
         { 
          var myli = document.createElement('li'); 
          myli.innerHTML = elem; 
////////////////////////////////////// 
          myli.onclick=(function() { fill(inputTextField, elem); }); 
////////////////////////////////////// 
          myul.appendChild(myli); 
         } 
        } 

        document.getElementById('suggestionsList').appendChild(myul); 
       }); 
      } 
    } 

    function fill(object, thisValue) { 
     object.value = thisValue; 
//  setTimeout("$('#suggestions').fadeOut();", 600); 
    } 
</script> 

Answer 1

你的響應函數只：

function(data){ 
    $('#suggestionList').innerHTML = '<ul><li>' + data.split('\n').join('</li><li>') + '</li></ul>'; 
} 

外某處的一切，裏面function suggest(){：

$('#suggestionList').delegate('li', 'click', function(){ 
    fill(inputTextField, $(this).val()); 
}); 

---

FYI該行沒理由沒有工作是，ELEM的值更改......向你展示我的意思，看看下面的例子：

for(var i=0; i<10; i++){ 
    $('#someDiv').bind('click', function(){ alert(i); }); 
} 

，將顯示「10」，無論你點擊什麼DIV，因爲變量i不斷遞增至10所有的函數都引用這個變量。爲了使這項工作，你需要某種形式的封閉：

for(var i=0; i<10; i++){ 
    $('#someDiv').bind('click', (function(x){ return function(){ alert(x); } })(i)); 
} 

現在i到內部函數傳遞和爲x引用。

Answer 2

這是我試圖把它清理乾淨，未經測試

<script type="text/javascript"> 
    $('.suggestable').live('keyup', (function() { suggest(this); })); 

    function suggest(inputTextField) 
    { 
     var inputString = inputTextField.value; 
     var lookFor = $(inputTextField).attr('data-lookfor'); 

     if(inputString.length == 0) { 
//   $('#suggestions').fadeOut(); 
     } else { 
      $.post(AjaxVars.url, 
       { 
        action: 'suggest-submit', 
        queryString: inputString, 
        lookFor: lookFor 
       }, 
       function(data) 
       { 
        $('#suggestionsList').html(''); 
        var myul = document.createElement('ul'); 
        $.each(data.split('\n'), function(k, v) { 
         if(v.length < 0) 
          return true; 
         (function(elem){ 
          var myli = document.createElement('li'); 
          myli.innerHTML = elem; 
          myli.onclick = function() { fill(inputTextField, elem); }; 
          myul.appendChild(myli); 
         })(v); 
        }); 
        $('#suggestionsList').appendChild(myul); 
       }); 
      } 
    } 

    function fill(object, thisValue) { 
     object.value = thisValue; 
//  setTimeout("$('#suggestions').fadeOut();", 600); 
    } 
</script>