Twitter Bootstrap машинописный не работают

Я работаю на Twitter Bootstrap машинописного и я застрял, как я не получаю сообщение об ошибке, и все же автозаполнение не работает.Twitter Bootstrap машинописный не работают

это мое поле ввода

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

и это мой сценарий

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

это как мой var data выглядит

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

Что я хочу сделать, это получить название продукта (name в var data) и на selec (с помощью идентификатора продукта, который я получаю в var data, как id).

Я только что потерял на этом этапе, как я не получаю сообщение об ошибке. Буду признателен за любой толчок в правильном направлении.

источник

2013-09-30 Baig

мне удалось это сделать, выполнив эту тему

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/

источник

2013-10-08 10:42:24 Baig

Я застрял на что-то подобное .. смотрите мой код ниже –

Можете ли вы кратко решение Вот? – Shog9

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

источник

2015-09-15 15:23:48

Twitter Bootstrap машинописный не работают

ответ

Смежные вопросы