如何自定义引导程序的 typeahead 下拉菜单答案

【问题标题】：how to customize bootstrap's typeahead dropdown如何自定义引导程序的 typeahead 下拉菜单
【发布时间】：2016-05-09 10:54:02
【问题描述】：

我正在阅读和测试，但我仍然无法掌握如何使用 typeahed 自定义，我想在 Dropbox 中显示不止一个字段，并使用 ID 进行搜索。

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

我从 php 查询中得到我的 json 编码数组

<?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);

?>

这就是我从 php 中得到的：

{"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"
}]

我不知道如何从 json 中显示标签，并能够在表单上显示使用值和 id。

This is what I get now

【问题讨论】：

标签： php json remote-access typeahead

【解决方案1】：

我正在尝试这个：

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

但是出错了，源码部分是我的大问题。

【讨论】：