jquery ui自動完成點擊事件處理程序

我無法弄清楚如何使jquery ui自動完成庫工作的選擇方法。我試圖把一個測試用例放在一起，但由於某種原因（xsrf？），測試沒有帶來結果。我的問題是沒有得到結果並顯示它們（當我在同一個域上發出請求時，它工作正常），我的問題是，在我在下拉菜單中得到結果後，沒有任何反應，當我點擊其中一個結果。jquery ui自動完成點擊事件處理程序

test.js

<html><body> 

<script type="text/javascript" src="./jquery-1.7.1.min.js"> </script> 
<script type="text/javascript" src="./jquery-ui-1.8.17.custom.min.js"> </script> 
<link rel="stylesheet" href="./jquery-ui.css" /> 
<script type="text/javascript" > 

    var cwJQ = jQuery.noConflict(); 

    cwJQ(document).ready(function() { 

     $input = cwJQ('input#last_name'); 

     var renderItemOverride = function (ul, item) { 
       return cwJQ("<li></li>") 
         .data("item.autocomplete", item) 
         .append(item.label) 
         .appendTo(ul); 
     }; 

     $input.autocomplete({ 
       source: function(req, res) { 
         cwJQ.ajax({ 
           url: 'http://news.google.com/news/search', 
           dataType: 'html', 
           data: { "q": req.term 
           }, 
           success: function(data) { 
             var datum = new Array; 
             cwJQ(data).find('a').each(function(i, val) { 
               datum.push("<span name='li-span'>" + cwJQ(val).text() + "</span>"); 
             }); 
             res(datum); 
           } 
         }) 
       }, 
       select: function(event, ui) { 
         alert();console.log(); 
       }, 
       minLength: 2 
     }).data('autocomplete')._renderItem = renderItemOverride; 

     cwJQ("#li-span").live('click', function() { 
       console.log(this); 
     }); 
    }); 

</script> 

     <form> 
       <label class="autocomplete weight-normal">By last name</label> 
       <input type="text" name="last_name" size="35" class="width-full" id="last_name" /> 
     </form> 

</body></html>

的jquery-ui.css

.ui-menu { 
     padding: 0px; 
     background-color: #FFF; 
     overflow: hidden; 
} 

ul.ui-menu { 
     display: block; 
     list-style-position: outside; 
     list-style: none; 
     padding: 0; 
     margin: 0; 
     border: 1px solid #998F87; 
     overflow: auto; 
     max-height: 200px; 
     width: 200px; 
} 

ul.ui-menu li { 
     margin: 0px; 
     padding: 3px 5px; 
     cursor: pointer; 
     display: block; 
     font-size: 12px; 
     overflow: hidden; 
} 

span#undefined { 
     display: block; 
     background-color: #ffff00; 
     width: 100%; 
     margin: 0; 
} 

ul.ui-menu li:hover { background: #ff00ff; }

EDIT

工作的代碼是：

var cwJQ = jQuery.noConflict(); 

cwJQ(document).ready(function() { 

    $input = cwJQ('input#last_name'); 

    $input.autocomplete({ 
     source: function(req, res) { 
      cwJQ.ajax({ 
       url: 'url', 
       dataType: 'html', 
       data: { "name": req.term, 
        "name_in_id": 1 
       }, 
       success: function(data) { 
        var datum = new Array; 
        cwJQ(data).find('li').each(function(i, val) { 
         datum.push({ value: cwJQ(val).text(), id: val.id.split('_')[1] }); 
        }); 
        res(datum); 
       } 
      }) 
     }, 
     select: function(event, ui) { 
          if(ui.item.id != undefined) { 
       addMemDat(ui.item.id, ui.item.value); 
      } 
     }, 
     search: function() { 
      cwJQ(this).addClass("auto_complete_loading"); 
     }, 
     open: function(event, ui){ 
      cwJQ(this).removeClass("auto_complete_loading"); 
     }, 
     close: function() { 
      $input.val(''); 
     }, 
     minLength: 2 
    }).data("autocomplete")._renderItem = function(ul, item) { 
    return cwJQ("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a><span id='" + item.id + "'>" + item.value + "</span></a>") 
     .appendTo(ul); 
    }; 
});

即第e _renderItem覆蓋是不正確的（但也有添加/刪除自動完成類與一些簡單的CSS來顯示一個微調框在輸入框中，而檢索結果。

來源

2012-02-20 ag4ve

你可以試試這個：

datum.push({ value: "<span name='li-span'>" + cwJQ(val).text() + "</span>" });

，而不是這樣的：

datum.push("<span name='li-span'>" + cwJQ(val).text() + "</span>");

它爲我...

來源

2012-02-20 23:52:52

嗡嗡聲，那不正確的工作。然而，它讓我刪除代碼來覆蓋_renderItem方法，現在select方法似乎工作。 – ag4ve 2012-02-21 00:19:17

好吧，似乎我可以推{value：blah，id：blah}並獲得訪問權限，而不是將id放在span中等等。與CSS混了一下，但我想我可以用這個工作。謝謝大家。 – ag4ve 2012-02-21 00:21:32

添加到德米特里的答覆 - 您可能需要更改

select: function(event, ui) { 
        alert(); 
    }

到

select: function(event, ui) { 
        alert(ui.item.value); 
    }

來源

2012-02-21 00:02:08 lifeIsGood

jquery ui自動完成點擊事件處理程序

回答

相關問題