Autocomplete JQuery-UI Undefined List

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

you need to return like return { value: el.kdbr, label: el.nmbr } — Arun P Johny
– Arun P Johny, Commented Aug 14, 2014 at 3:26
@ArunPJohny : thank you, that's what i've been looking for days :) — ryuusoultaker
– ryuusoultaker, Commented Aug 14, 2014 at 3:36

Netorica · Accepted Answer · 2014-08-14 03:30:32Z

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

edited Aug 14, 2014 at 3:30

answered Aug 14, 2014 at 3:24

Netorica

19.5k19 gold badges78 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ryuusoultaker Over a year ago

thank you, that works :) now i know where i'm doing wrong :) and i also have include the css now :)

Collectives™ on Stack Overflow

Autocomplete JQuery-UI Undefined List

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related