2017-12-31 196 views
1

jquery를 사용하여 검색 창에 autosuggest 함수를 추가하려고합니다. 그러나 나는 내 시도에 실패했다. 나는 튜토리얼을 따라 갔지만 여전히 이해하지 못했다.내 검색 창에 자동 추가 기능을 추가하는 방법은 무엇입니까?

hide(). show (2000)는 내 검색 창에서 작동하지만 나머지는 작동하지 않습니다. 나는 무엇을 놓쳤는가?

편집 : 해결책을 찾기 위해 계속 노력해 왔지만 여전히 운이 없었습니다. 새로운 변경 사항으로 코드를 편집했습니다. 나는 해당 기능을 https://goodies.pixabay.com/jquery/auto-complete/demo.html에서 온라인으로 발견했으며 해당 사이트에서 작동합니다.

EDIT2 : 독립형 사이트로 사용할 수있게되었습니다. 내 사이트에서 뭔가가 그것을 차단하고있을 가능성이 있습니까? 그렇다면 블록을 어떻게 덮어 쓸 수 있습니까?

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 

    <title>Testsite</title> 

    <script>"jQuery-autoComplete-master/jquery.auto-complete.min.js"</script> 
    <script>"jQuery-autoComplete-master/jquery.auto-complete.js"</script> 
    <script>"jQuery-autoComplete-master/jquery.auto-complete.css"</script> 

</head> 
<body> 
    <div> 
      <h1>Search field</h1> 
    <input id="search" style="width: 500px; height: 50px;font-size:18pt;" placeholder="ActionScript or AppleScript"><br> 
    <div id="results"></div> 
    <p></p> 


    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>--> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

    <script> 
     //function for autocomplete 
    </script> 
</div> 

+0

html에 2 가지 버전의 jQuery를 추가하는 이유는 무엇입니까? – Hanif

+0

'src'을 상대 경로로 설정하여 스크립트를 추가하는 것은 StackOverlow에서 쓸모가 없습니다. 또한 첫 번째'jQuery'는'http'를 통해 제공되며'https'를 통해 나머지가 제공되는 경우 '혼합 된 콘텐츠'로 거부됩니다. 마지막으로'autocomplete' 플러그인을 포함시키지 않았습니다. –

답변

2

$(function(){ 
$('#search').autoComplete({ 
    minChars: 2, 
    source: function(term, suggest){ 
     term = term.toLowerCase(); 
     var choices = ['ActionScript', 'AppleScript', 'Asp', ...]; 
     var matches = []; 
     for (i=0; i<choices.length; i++) 
      if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]); 
     suggest(matches); 
    } 
}); 
}); 

내 HTML 코드 나는 당신이 jQuery를 UI 기능하지 jQuery를에서 autocomplete() 찾고 있던 것을, 두 jQuery를 수입에서 추론.

이 경우 JS 및 CSS를 추가하기 만하면됩니다. 그렇지 않으면 사용하려는 autocomplete() 함수에 대한 코드를 추가해야합니다. 을 편집

코드는 포함 :

$(function() { 
 
    var availableTutorials = [ 
 
    "ActionScript", 
 
    "Bootstrap", 
 
    "C", 
 
    "C++", 
 
    ]; 
 

 
    $('#search').hide(0).show(2000); 
 
    $("#search").autocomplete({ 
 
    source: availableTutorials 
 
    }); 
 
});
<div> 
 
    <h1>Sök efter en bok</h1> 
 
    <input id="search" style="width: 500px; height: 50px;font-size:18pt;" placeholder="Titel"><br> 
 
    <button id="button" type="button">Sök bok</button> 
 
    <div id="results"></div> 
 
    <p></p> 
 

 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <!--<script src="js/seekBook.js"></script>--> 
 
</div>

시 : 다음 시간, 영어 및 액세스 코드 (: seekBook.js 예)없이 모든 것을 제공하십시오. 귀하의 질문과 답변은 귀하의 케이스뿐만 아니라 모든 사람에게 적용되어야합니다.)