Typeahead TypeError: it.toLowerCase is not a function

Question

Good day. Please take a look at my scrit first.

My JS

$(document).ready(function(){    
    $("#outlet").typeahead({
         source: function(query, process) {

                $.ajax({
                 url: '<?=base_url();?>graph/outletlists',
                 data: {outlets:$("#outlet").val()},
                 type: 'POST',
                 dataType: 'JSON',
                 success: function(data) {
                          process(data);
                          console.log(data);
                        }               
                    });
         },
        minLength: 2
    });
}); 

My Controller

function outletlists()
    {
        extract(populateform());
        $hasil = $this->modelmodel->showdata("SELECT Outlet from transaksi where outlet like '%".$outlets."%' group by Outlet");
        echo json_encode($hasil);
    }

and my form

 <div class="form-group">
         <label class="col-sm-3 control-label">Outlet</label>
              <div class="col-sm-5">
                   <input type="search" id="outlet" class="form-control" placeholder="Search..." data-provide="typeahead" />
              </div>
   </div>

so, I'm using Bootstrap3-typeahead. From my script above i got this error

from console.log(data) i already have my desired result. So my problems are i can't see any suggestion and then i got this error from firebug

return ~it.toLowerCase().indexOf(this.query.toLowerCase());

This is what i got when i input AR

[{"Outlet":"K-AR3"},{"Outlet":"K-AR4"},{"Outlet":"K-ARN2"},{"Outlet":"K-ARN3"}]

any help would be appreciated, sorry for my bad english.

I try it to make it like the example at http://twitter.github.io/typeahead.js/examples/

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$(document).ready(function() {
    $("#outlet").typeahead({
        autoSelect: true,
        minLength: 2,
        delay: 400,
        source: states
    });
});

and it works .

Results from firebug

POST http://localhost:84/new_store/graph/outletlists 200 OK 375ms
jquery-....min.js (line 4) HeadersPostResponseHTMLCookies

[{"Outlet":"K-AR3"},{"Outlet":"K-AR4"},{"Outlet":"K-ARN2"},{"Outlet":"K-ARN3"}]

TypeError: b.toLowerCase is not a function

...on(a){var b=this.displayText(a);return~b.toLowerCase().indexOf(this.query.toLowe...

bootstr....min.js (line 1, col 2903

I try to change my bootstrap3-typeahead.js to bootstrap3-typeahead.min.js end my error become like this

TypeError: b.toLowerCase is not a function ...on(a){var b=this.displayText(a);return~b.toLowerCase().indexOf(this.query.toLowe...

Solution 1

as what i can see from your console.log(). you get this.

[{"Outlet":"K-AR3"},{"Outlet":"K-AR4"},{"Outlet":"K-ARN2"},{"Outlet":"K-ARN3"}]

you only need

[{"K-AR3"},{"K-AR4"},{"K-ARN2"},{"K-ARN3"}]

so try to change your controller to

function outletlists()
    {
        extract(populateform());
        $hasil = $this->modelmodel->showdata("SELECT Outlet from transaksi where outlet like '%".$outlets."%'  group by Outlet");
        $data = array();
        foreach ($hasil as $hsl)
            {
                $data[] = $hsl->Outlet;
            }
        echo json_encode($data);
    }

Solution 2

Even though there's been an accepted answer I'm going to offer another answer, as this one did not apply to my situation. It turned out that one of my array elements was a null value. So I rewrote my data query to filter out nulls.

Comments

[cpoDesign]

that is great news

[user1204214]

Just to close the loop on this you can also use something similar to this: github.com/bassjobsen/Bootstrap-3-Typeahead/issues/170 where you only select the value from the JSON key-pair that was returned.... item.value or in the example above item.outlet if you do no want to modify the controller.