jQuery UI 자동 완성 onSelect 다시 쓰기

Question

자동 완성 기능을 첨부 할 텍스트 상자가 있습니다. 입력을 시작하면 데이터베이스에서 조회하고 적절한 내용을 반환하거나 줄입니다. 반환 된 목록에서 사용자가 선택할 때 이미지와 다른 정보가 반환되어 페이지에 배치됩니다. 훌륭하게 작동합니다. 아래를 참조

jQuery(function ($) { 
var a = $('#artistName').autocomplete({ 
    serviceUrl: '/link/to/processor.ashx?action=artist', 
    minChars:1, 
    maxHeight:400, 
    width:300, 
    zIndex: 9999, 
    deferRequestBy: 0, 

    // callback function: 
    onSelect: function(value, data){ 
     if (data) { 
      var artistData = data.split('|'); 
      var src = '<%= ImageServer %>' + '/path/to/image/' + value + '.jpg'; 
      $("#artistPhoto").attr('src', src); 
      $('#artistExt').remove(); 

      if (artistData[1] !== undefined && artistData[1] != 0) { 
       $("#artistSection").append('<div id="artistExt"><span>Contact me @</span> 1-888-123-4567 Ext: ' + artistData[1] + '</div>'); 
      } 
     } 
    } 
});  
}); 

은 내가 사용자가 목록에서 선택하지 않는 경우 동일한 기능을 제공 할 일은 노력하고 (예를 들면 ... 사용자는 "빌"및 자동 완성과 같은 이름을 입력 시작할 수 있습니다 "Bill"을 반환 할 것입니다 ... 그러나 사용자가 반환 된 결과 목록에서 "Bill"을 선택하지 않고 대신 이름을 입력하면 ... 이벤트가 onSelect 함수에 있기 때문에 아무 것도 발생하지 않습니다.

이벤트가 발생하는 동안 onSelect, onChange, onLoad, onKeyUp, on [enter] 등의 방법으로이 글을 쓰는 방법을 알아낼 수 있습니까? 가치/길이를 찾아 보는 것이 낫습니까? 또한 사용자가 페이지를 입력하고 텍스트 상자가 미리 채워지는 경우 발생할 수있는 시나리오가 있습니다. 이 경우 onSelect 함수와 동일한 디스플레이 변경 사항을 원합니다.

도움을 주시면 감사하겠습니다. 감사.

Answer 1

이것은 약간의 해킹이지만 작동합니다.

당신이 당신의 자동 완성을 설정하기 전에 변수를 추가 :

var firstitem = null; 

이 코드를 사용하여 자동 완성에 open 옵션을 추가합니다.

open : function (event, ui) { 
    firstitem = j$(j$("#SelectProject").data("autocomplete").menu.element.children().first()[0].innerHTML).html(); 
} 

자동 완성을 정의한 후 자동 완성 입력에 흐림 이벤트를 바인딩합니다.

.bind("blur", function() { j$(this).val(firstitem); }); 

최종 결과는 다음과 같아야합니다 또한

jQuery(function ($) { 

    var firstitem = null; 
    var a = $('#artistName').autocomplete({ 
     serviceUrl : '/link/to/processor.ashx?action=artist', 
     minChars : 1, 
     maxHeight : 400, 
     width : 300, 
     zIndex : 9999, 
     deferRequestBy : 0, 

     // callback function: 
     onSelect : function (value, data) { 
     if (data) { 
      var artistData = data.split('|'); 
      var src = '<%= ImageServer %>' + '/path/to/image/' + value + '.jpg'; 
      $("#artistPhoto").attr('src', src); 
      $('#artistExt').remove(); 

      if (artistData[1] !== undefined && artistData[1] != 0) { 
      $("#artistSection").append('<div id="artistExt"><span>Contact me @</span> 1-888-123-4567 Ext: ' + artistData[1] + '</div>'); 
      } 
     } 
     }, 

     open : function (event, ui) { 
     firstitem = j$(j$("#SelectProject").data("autocomplete").menu.element.children().first()[0].innerHTML).html(); 
     } 
    }).bind("blur", function() { j$(this).val(firstitem); }); 

}); 

을의 selectFirst 플러그인의 autoFocus option 및 자세한 내용은 open event documentation를 참조하십시오.