twitter bootstrap typeahead nicht funktioniert

Arbeite ich auf twitter bootstrap typeahead, und ich bin stecken, wie ich erhalte keine Fehlermeldung und dennoch ist die "auto-vervollständigen" funktioniert nicht.

dies ist mein input-Feld

<input type="text" id="autocomplete" />

und dies ist mein Skript

<script>
    $('#autocomplete').typeahead({
            source: function(process) {
                var data =  <?php Widgets::allProducts() ?>;
                process(data);
        },

        matcher: function(item) {

            return
            item.name.toLocaleLowerCase()
                .indexOf(this.query.toLocaleLowerCase()) != -1;

        },
        highlighter: function(item) {
            return item.name;

        },
        updater: function (item) {
            alert(JSON.parse(item).value);
            return JSON.parse(item).name;

        }
    });

</script>

dies ist, wie mein var data sieht aus wie 

var data =  [{"name":"Acne.org","id":"5"},{"name":"AcneFree","id":"6"},{"name":"Alpha Hydrox","id":"16"},{"name":"AmLactin","id":"17"},{"name":"Astara","id":"21"}];

Was ich tun möchten ist, bekommen die Produktname aufgeführt ist (das ist name im var data ) und bei der Wahl des Produktes leiten den Benutzer auf Produkt-Seite (mit Hilfe der Produkt-id, die ich bin immer in var data als id).

Ich bin einfach nur verloren auf dieser Bühne, ich bin nicht immer alle Fehler. Ich Schätze jede push-to-richtige Richtung.

InformationsquelleAutor Baig | 2013-09-30
  1. 2

    Habe ich es geschafft dieses zu erhalten getan, indem Sie die folgenden dieses Thema

    http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/

    http://stevedrivendevelopment.com/2013/02/10/using-twitter-bootstrap-typeahead-to-select-a-keyvalue-pair-not-a-string/

    • Ich komme auf etwas ähnliches.. bitte siehe meinen code unten
    • Kannst du bitte fassen Sie die Lösung hier?
    InformationsquelleAutor Baig
  2. -4
    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Tokenfield for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery UI CSS -->
    <link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
    <!-- Bootstrap styling for Typeahead -->
    <link href="dist/css/tokenfield-typeahead.css" type="text/css" rel="stylesheet">
    <!-- Tokenfield CSS -->
    <link href="dist/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
    <!-- Docs CSS -->


  </head>
  <body>

    <input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" />


    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="dist/bootstrap-tokenfield.js" charset="UTF-8"></script>
    <script type="text/javascript" src="docs-assets/js/scrollspy.js" charset="UTF-8"></script>
    <script type="text/javascript" src="docs-assets/js/affix.js" charset="UTF-8"></script>
    <script type="text/javascript" src="docs-assets/js/typeahead.bundle.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="docs-assets/js/docs.min.js" charset="UTF-8"></script>
</body>
<?php

    try
    {
        $Conn=mysqli_connect("localhost","root","","andani_play");
        $Query="SELECT `GroupName` FROM `group`";

        $Result=mysqli_query($Conn,$Query);
        $Array=array();
        if($Result)
        {

            while($Data=mysqli_fetch_array($Result))
            {
            array_push($Array,$Data[0]);


            }
        echo json_encode($Array);
        }
        else
        {
        echo mysqli_error($Conn);
        }

    }
    catch (mysqli_error $e)
    {
    echo "error connecting to the database/host";
    exit();
    }


?>
<script>
$(document).ready(function(){
var engine = new Bloodhound({
  /*local: [{value: 'red'}, {value: 'blue'}, {value: 'green'} , {value: 'yellow'}, {value: 'violet'}, {value: 'brown'}, {value: 'purple'}, {value: 'black'}, {value: 'white'}],*/
  source: [<?php echo json_encode($Array); ?>],
  datumTokenizer: function(d) {
    return Bloodhound.tokenizers.whitespace(d.value);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace
});

engine.initialize();

$('#tokenfield-typeahead').tokenfield({
  typeahead: [null, { source: engine.ttAdapter() }]
});
});
</script>
  </body>
</html>
    InformationsquelleAutor Ethic Or Logics
Schreibe einen Kommentar