2016-07-20 3 views
-5

내 현재 프로젝트 용 자동 제안과 함께 빠른 검색을 위해 jquery 자동 완성을 사용하고 있습니다. 일반적으로 잘 작동합니다. 나는 formating에 어려움을 겪고있다. 내가 다른 장소에서 "마진 - 하단"또는 "마진 탑"을 추가하려고자동 완성 제안 서식을 지정하는 방법은 무엇입니까?

$(document).ready(function() { 
 
    var tagsAutocomplete = ["Schaufenster", "Schauspieler", "Schadenfreude"]; 
 
    $("#suche").autocomplete({ 
 
     appendTo:"#main1 arrowbox", 
 
     minLength: 3, 
 
     source: function(request, response) { 
 
     var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term),"i"); 
 
     response($.grep(tagsAutocomplete,function(item){ 
 
     return matcher.test(item); 
 
     })); 
 
     } 
 
    }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/themes/black-tie/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.js"></script> 
 

 
<div id="canvas"> 
 
    <section id="cont-right"> 
 
     <div class="systemDiv"> 
 
    <nav id="main"> 
 
     <ul> 
 
     <li id="main1"> 
 
     <ul> 
 
     <li> 
 
      <div class="arrowbox"> 
 
      <div class="image-menu-item"> 
 
      <input autocomplete="off" class="ui-autocomplete-input" name="query" id="suche" maxlength="180" placeholder="Suchbegriff" tabindex="-1" type="text"> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    </section> 
 
    </div>

내 예를 들어이 링크가 가리키는 아래. 아무것도 도움이되지 못했습니다. 결과 목록은 항상 입력 필드 아래에 있습니다. 그 중 일부 게시물을 찾았지만 도움이되지 못했습니다.

누군가가 아이디어를 갖고 있습니까? 감사.

참고 : 세 개의 첫 번째 문자 "sch"는 모든 항목을 나열합니다.

+0

@Tushar 최소한의 완전하고 검증 가능한 예제는'https : // '를 추가하면'jsfiddle.net/reporter/8tmmw9b0/' 아래에 있습니다. richtext 편집기는 jsfiddle을 가리키는 링크를 수락하지 않습니다 (또는 적절한 jsfiddle 링크를 만드는 방법을 모르겠습니다). – reporter

+0

https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and- html 코드 스 니펫 / – Tushar

답변

0

동료와 함께 내 문제에 대한 해결책을 찾을 수있었습니다.

을 추가하면 ul.ui-autocomplete {top: <number of pixels>px !important;}이 내 문제를 해결했습니다.

주된 이유는 CSS 파일 의 CSS 선언이 jquery-ui.css이 모든 costumised 값보다 우선한다는 것입니다.

관련 문제