如何自定义bootstrap的typeahead下拉列表

时间:2016-05-09 10:54:02

标签: php json remote-access typeahead

我正在阅读和测试,但我仍然无法掌握如何使用类型化的自定义,我想在Dropbox中显示的不仅仅是1个字段,并使用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

1 个答案:

答案 0 :(得分:0)

我正在尝试这个:

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

但是出了错误,源代码部分是我的大问题。