2017-12-31 36 views
1

Ich versuche, eine Auto-Suggest-Funktion zu meiner Suchleiste mit jQuery hinzufügen. Aber ich bin bei meinen Versuchen erfolglos. Ich habe die Tutorials verfolgt, verstehe es aber immer noch nicht.Wie füge ich Autosuggest meiner Suchleiste hinzu?

Die hide(). Show (2000) funktioniert auf meinem searchbar aber nicht den Rest. Was habe ich verpasst?

EDIT: Ich habe nach Lösungen gesucht und immer noch kein Glück. Ich habe meinen Code mit meinen neuen Änderungen bearbeitet. Ich habe diese Funktion online unter https://goodies.pixabay.com/jquery/auto-complete/demo.html gefunden und es funktioniert auf ihrer Website.

EDIT2: Ich habe es geschafft, es als eigenständige Website zu arbeiten. Ist es möglich, dass etwas auf meiner realen Seite blockiert? Wenn ja, wie kann ich den Block überschreiben?

$(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); 
    } 
}); 
}); 

Mein HTML-Code

<!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

Warum fügen Sie 2 verschiedene Version von jQuery in Ihrem HTML hinzugefügt? – Hanif

+0

Das Hinzufügen von Skripten mit dem 'src'-Set zu einem relativen Pfad ist in StackOverlow nutzlos. Außerdem wird Ihre erste "jQuery" über "http" geschaltet und als "Gemischte Inhalte" abgelehnt, wenn Sie den Rest über "https" erhalten. Schließlich haben Sie das Plug-in 'autocomplete' nicht eingeschlossen. –

Antwort

2

ich abgeleitet, aus den beiden jQuery Importe, dass Sie für die autocomplete() aus der jQuery UI-Funktion gesucht haben, nicht jQuery.

Wenn dies der Fall ist, müssen Sie nur ihre JS hinzuzufügen, und vorzugsweise auch ihre CSS. Andernfalls müssen Sie den Code für die autocomplete() Funktion hinzufügen, die Sie verwenden möchten!

Ihr Code, die Bearbeitung enthält:

$(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>

Ps: Die nächste Mal bitte alles in Englisch zur Verfügung stellen und ohne unzugänglichen Code (Beispiel: seekBook.js). Ihre Frage und meine Antwort sollte für alle gelten, nicht nur für Ihren Fall;)

Verwandte Themen