自动完成的JQuery-UI未定义列表

Question

I've been working with jQuery UI Autocomplete to make an suggestion from database and autocomplete the rest of field. the javascript working just fine, but it made output like this:

But if i press down button and enter it, the field will completed with value from database.

this is my javascript :

$(function() {
//clear values on refresh
$('#nmbr').val("");

$(".kdbr").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "<?php echo base_url();?>js/coba3.php",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
            //  var data = $.parseJSON(response);
                response($.map(data, function (el) {
                    return {
                        kdbr: el.kdbr,
                        nmbr: el.nmbr
                    };
                }));
            }
        });
    },
    select: function (event, ui) {
        // Prevent value from being put in the input:
        event.preventDefault();
        this.value = ui.item.kdbr;
        // Set the next input's value to the "value" of the item.
        $('#nmbr').val(ui.item.nmbr);

    }

});
});

and this is my html code :

<form action="#" method="post">
 <p><label for="kdbr">KDBR</label><br />
     <input type="text" name="kdbr" id="kdbr" class = "kdbr" value="" /></p>
 <p><label for="nmbr">NMBR</label><br />
     <input type="text" name="nmbr" id="nmbr" class = "nmbr" value="" /></p>
</form>

and this is the javascript version that i used

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

i have to write it to, because when i used version 1.8.1 the list show word

undefined

Answer 1

As I can see on the picture I think you didn't include the styles sheets of jquery-ui because the autocomplete was not styled well.

Please include all.css or just the specific autocomplete.css

https://github.com/jquery/jquery-ui/tree/master/themes/base

and with this line

 select: function (event, ui) {
        // Prevent value from being put in the input:
        event.preventDefault();
        this.value = ui.item.kdbr;
        // Set the next input's value to the "value" of the item.
        $('#nmbr').val(ui.item.nmbr);

     return false; //<--- you need to add this

    }

and change the

 return {
      kdbr: el.kdbr,
      nmbr: el.nmbr
 };

to this

return {
      label: el.kdbr,
       value: el.nmbr
  };

the autocomplete needs a json return value of the items containing that value and its label