2013-01-13 3 views
1

내 웹 사이트에 대한 검색 양식을 개발 중이며 JQuery UI 자동 완성 위젯을 사용하여 사용자 유형으로 값을 제안하려고합니다. 지금까지 제안은 효과가 있습니다.jQuery UI 자동 완성 : 마우스 선택 없음

사용자가 목록에서 값을 선택하면 입력 필드가 업데이트되지 않습니다. 예를 들어 Jquery UI Autocomplete doesn't allow options to be selected with mouse anymore과 같은 문제가보고 된 것으로 보이지만 해결 방법이 게시되지 않았습니다.

코드는 가능한 한 간단하다 : 나는 아라스 테마, JQuery와 1.8.3과 (이미 워드 프레스 설치에 포함) jQuery를 UI 1.9.2로 워드 프레스 3.5을 사용하고

<script> 
jQuery(document).ready(function(){ 

    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 

    jQuery("#tbauthor").autocomplete({ 
     source: availableTags, 
    }); 

}); 
</script> 
<div id="primary" class="aside main-aside sidebar"> 
    <form style="font-size: 10px;" name="search-news" action="." method="get"> 
    <table border= "0"> 

     <tr class="advanced"><td>Cerca per autor</td><td><input type="text" id="tbauthor" name="autor" /></td></tr> 

    </table> 
</form> 
</div> 

. header.php에서 wp_enqueue_script를 호출하는 자동 완성 라이브러리를로드하려면 여기에 발췌 부분 (header.php)이 있습니다. 문제가 해결되면서 예는 더 이상 작동하지 않는 예를입니다

wp_enqueue_script('jquery'); 
wp_enqueue_script('jquery-ui-tabs', null, array('jquery-ui-core', 'jquery'), null, false); 
wp_enqueue_script('jquery-ui-autocomplete', null, array('jquery-ui-core', 'jquery'), null, false); 

UPDATE : 마지막으로, 당신이 비를 볼 수 있습니다 내 유일한 생각은 내가 라이브러리로드에 문제가 없다는 것입니다 내 사이트에서 일하는 예제 : http://www.cabanyal.com/nou/resultat/?id=1994

미리 도움을 주셔서 감사합니다.

+0

앞으로 파이어 폭스 17 입력 값이 업데이트되고 있습니다 .. – redDevil

+1

버전 관리에 문제가 있다고 생각합니다. 행동의 예가 있습니다 : http://jsfiddle.net/v9bSa/ – Razmig

+0

@Razmig jsfiddle에 대해 몰랐습니다. 고마워,하지만 난 아직도 내 예제가 무엇이 잘못되었는지 이해하지 못한다. –

답변

1

자동 완성과 충돌의 원인이되는 jQuery를 검사기 플러그인의 오래된 버전을 포함하여 귀하의 워드 프레스 테마 :

<script type='text/javascript' src='http://www.cabanyal.com/nou/wp-content/themes/arras/js/jquery.validate.min.js'></script> 

나는 여기에 문제가 복제 할 수 있었다 : jsfiddle.net/VAna6/1

변경 스크립트를 최대 숫자는 recent version이며 자동 완성은 여기에 제시된대로 작동합니다 : http://jsfiddle.net/VAna6/2/.

+0

해결! 당신이 지적했듯이 Arras 테마는 jquery.validate.min.js (v1.5.1)의 이전 버전을 사용하고있었습니다. 나는 스크립트를 업데이트하고 지금은 매력처럼 작동합니다. –

+0

좋아요! 나는 또한 주제가 작성자에게 연락하여 기회를 얻으면 유효성 검사기 스크립트를 업데이트하도록 알려줍니다. :) - 길을 잃은 희생자의 수를 최소화하는 데 도움이됩니다! –