wie man bootstrap typeahead dropdown anpassen

Ich bin Lesen und Testen, aber ich kann immer noch nicht in den Griff bekommen, wie die typeahed Anpassung zu verwenden, möchte ich zeigen in der Dropbox mehr als nur 1 Feld, und verwenden Sie die ID zu tun Suche.wie man bootstrap typeahead dropdown anpassen

<script> 

$(document).ready(function(){ 

    $("#search").typeahead({ 

     name : 'imei', 

     remote: { url : 'pruebasql.php?query=%QUERY' }   

    }); 

}); 

</script> 



<body> 



    Imei: <input type="text" name="search" id="search" autocomplete="off"> 
    <input type="text" name="equipid" id="equipid" hidden> 



</body>

Und ich meine Json codierte Array aus einer PHP-Abfrage

<?php 



include('inc/config.php'); 



$con=mysqli_connect("localhost",$user,$pass,$database); 



$result = $con->query("SELECT imei,equipid,modelo FROM equipos WHERE imei LIKE '%{$query}%' or modelo LIKE '%{$query}%' or marca LIKE '%{$query}%' LIMIT 0,10"); 

$a_json_row = array(); 
$user_arr = array(); 

    while ($row = $result->fetch_object()){ 

     $a_json_row["id"] = $row->equipid; 
     $a_json_row["value"] = $row->modelo; 
     $a_json_row["label"] = $row->equipid.' '.$row->modelo; 
     array_push($user_arr, $a_json_row); 
     $user_arr2[] = $row->modelo;    

    } 

    $result->close(); 

    echo json_encode($user_arr); 

?>

und das ist, was ich aus dem php bekam:

{"id":"179","value":"IPHONE 6","label":"179 IPHONE 6"},{"id":"180","value":"I9300","label":"180 I9300" 
},{"id":"182","value":"XPERIA Z1","label":"182 XPERIA Z1"},{"id":"183","value":"i9300","label":"183 i9300" 
},{"id":"186","value":"i9300","label":"186 i9300"},{"id":"188","value":"i9505","label":"188 i9505"}, 
{"id":"204","value":"IPHONE 6","label":"204 IPHONE 6"},{"id":"206","value":"535F","label":"206 535F" 
}]

Ich habe keine Ahnung, wie man zeigen das Label aus dem JSON und in der Lage sein, den Wert und die ID auf dem Formular anzuzeigen.

This is what I get now

Quelle

2016-05-09 hugmax

ich dies versuchen:

var users = {}; 
var userLabels = [];  

$("#search").typeahead({ 
    source: function (query, process) { 

     //the "process" argument is a callback, expecting an array of values (strings) to display 

     //get the data to populate the typeahead (plus some) 
     //from your api, wherever that may be 
     $.get("pruebasql.php?query=%QUERY", { q: query }, function (data) { 

      //reset these containers 
      users = {}; 
      userLabels = []; 

      //for each item returned, if the display name is already included 
      //(e.g. multiple "John Smith" records) then add a unique value to the end 
      //so that the user can tell them apart. Using underscore.js for a functional approach. 
      _.each(data, function(item, ix, list){ 
       if (_.contains(users, item.label)){ 
        item.label = item.label + ' #' + item.value; 
       } 

       //add the label to the display array 
       userLabels.push(item.label); 

       //also store a mapping to get from label back to ID 
       users[ item.label ] = item.value; 
      }); 

      //return the display array 
      process(userLabels); 
     }); 
    } 
    , updater: function (item) { 
     //save the id value into the hidden field 
     $("#equipid").val(users[ item ]); 

     //return the string you want to go into the textbox (e.g. name) 
     return item; 
    } 
});

bekam aber einen Fehler, der Quellenteil ist mein großes Problem.

Quelle

2016-05-09 11:17:42 hugmax

wie man bootstrap typeahead dropdown anpassen

Antwort

Verwandte Themen