Boostrap typehead (auto complete) ajax return multiple values

i create auto complete using boostrap typhead

I want show when selected data from autocomplete, return 2 values and place to input box and hidden data

i found 2 problem

  1. Data Autocomplete with double quotes
  2. i can't place ID BIO in hidden type

this is my code

PHP

<?php
include "database.php";
$query = $_REQUEST['query'];
$result = mysqli_fetch_object(mysqli_query($con,"select count(*) as total from biodata where NameBiodata LIKE '%".$query."%' "));
    if ($result->total > 0) {
        $data_tsk = mysqli_query($con,"select  IdBio,NameBiodatafrom biodata where NoUrut  NameBiodata LIKE '%".$query."%'");
        $data = array();
        while($tsk=mysqli_fetch_object($data_tsk)){ 
            array_push($data,array('label'=>$tsk->NameBiodata,'value'=>$tsk->IdBio));
        }
        echo json_encode($data);
    }
?>

Javascript

$('#name_biodata').typeahead({
          source: function (query, process) {
            $.ajax({
                url: 'ajax/auto_complete_biodata.php',
                type: 'POST',
                dataType: 'JSON',
                data: 'query=' + $('#name_biodata').val(),
                success: function(data) {
                    var results = data.map(function(item) {
                        var someItem = { myname: item.label, myvalue: item.value};
                        var jsonString = JSON.stringify(someItem.myname);  
                        return jsonString; // I don't know how to remove double qoutes
                        //return jsonString.replace(/\"/g, "");     // I try to remove double qoutes, but not selected
                    });
                    return process(results);
                }
            });
        },
        minLength: 1,
        updater: function(item) {
            var obj = JSON.parse(item);
            console.log(obj);  // i can't get Id BIO :(
            $("#IdBio").val(obj.value);
            return item;
        }
      }); 

JSON

[{"label":"Yeni Adelia Sofiyah als Selvi","value":"151"},{"label":"Yenni Ginting als Kak Yen","value":"276"},{"label":"Ria Wira","value":"572"}]

enter image description here

Help me thank's

1 answer

  • answered 2018-01-14 08:58 Wolen

    1. Double quotes are caused by JSON.stringify. This method is useful when you want send your JSON via HTTP request, echo your JSON as a string etc. In your case just use var jsonString = someItem.myname;.

    2. Your code is generally wrong here. source should look like this

    source: [ {name: "name", any: "value", you: "want"}, {name: "name2", any: "value", you: "want"} ];

    name field is required. Without it typeahead won't work if you want to pass objects (that have name and other values) instead single values. In your case you get

    source: ['one', 'two', 'three', 'etc'];
    

    So you should do something like that

      source: function (query, process) {
        $.ajax({
            url: 'ajax/auto_complete_biodata.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + $('#name_biodata').val(),
            success: function(data) {
                var results = data.map(function(item) {
                    var someItem = { name: item.label, myvalue: item.value}; 
                    return someItem;
                });
                return process(results);
            }
        });
    },
    

    Now you will get

    [
      {name: 'name_from_label', myvalue: 'your_value'}
    ]
    

    That's all.