YVS1102 YVS1102 - 4 months ago 62
Javascript Question

Typeahead TypeError: it.toLowerCase is not a function

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...

Answer

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