autosuggestを検索バーに追加するには？

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>

出典

2017-12-31 AtesTen

htmlに2つの異なるバージョンのjQueryを追加する理由は何ですか？ – Hanif

'src'を相対パスに設定したスクリプトを追加することは、StackOverlowでは無用です。また、最初の 'jQuery'は' http'で提供され、 'https'で提供される場合は'混合コンテンツ 'として拒否されます。最後に、あなたは 'autocomplete'プラグインを含んでいません。 –

$(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()を探していたことが、2つの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例）せずに、すべてを提供してください。あなたの質問と私の答えは、あなたのケースだけでなく、誰にでも適用されるべきです;）

出典

2017-12-31 17:50:16 NBajanca

autosuggestを検索バーに追加するには？

答えて

関連する問題