从ajax响应创建一些对象

问题描述：

我想用ajax做一个远程autosuggest，并且在使用onclick函数时遇到麻烦。我收到的Ajax响应简直是像从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>

答

你的响应函数只：

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引用。

答

这是我试图把它清理干净，未经测试

<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>

从ajax响应创建一些对象

相关推荐