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

편집

작업 코드는 다음과 같습니다

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

hummm, 정확히 작동하지 않았습니다. 그러나 _renderItem 메서드를 재정의하기 위해 코드를 제거해야하므로 select 메서드가 작동하는 것 같습니다. – ag4ve

글쎄, 그것은 {값 : 어쩌구, id : 어쩌구}를 밀어 넣을 수 있고 스팬에 id를 넣는 대신 그것에 액세스 할 수있는 것처럼 보입니다. CSS를 조금 어지럽 혔지 만 나는 이것으로 작업 할 수 있다고 생각한다. 모두에게 감사합니다. – ag4ve

이 - 당신이

을 변경해야 할 수도 있습니다

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

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

출처

2012-02-21 00:02:08 lifeIsGood

jquery UI 자동 완성 이벤트 처리기

답변

관련 문제