Question

52

How to feed the json value in text box using jQuery AutoComplete?

rated 0 times [ 53] [ 1] / answers: 1 / hits: 15192 / 11 Years ago, tue, january 28, 2014, 12:00:00

I have the following value representation of an actual JSON object returned from my controller:

script:

<script type=text/javascript>

    var customers = [{name:Urban Development,id:1},{name:Ball Corporation,id:2},{name:Apache Software Foundation,id:3},{name:The Coca-Cola Company,id:4},{name:Discovery Communications, Inc.,id:5},{name:Electronic Data Systems,id:6},{name:FreeWave Technologies, Inc.,id:7}] ;

    $(#customer).autocomplete({ source: customers });

</script>

html:

<label for=customer>Customer Name</label>

<input type=text name=customer id=customer >

I dont know how to do this so any1 can help me.

Updated
Model page

public function getEmp(){

$db = Loader::db();     

return $db->GetArray(select emp_id, emp_name as label, emp_name as value, emp_doj from employee_master);}

Controller page

$employee = employeeinfo::getEmp();

$this->set('employee', $employee);

view page
script

$(function() {

var dataEmp = <?php echo json_encode($employee); ?>;



/* my json value like this

[

{id: 2,label: S Kumar ,value: S Kumar ,emp_doj: 2013-07-02}, 

{id: 3,label: Cj Ramki ,value: Cj Ramki ,emp_doj: 2013-07-03}, 

{id: 4,label: V Sudarsanam,value: V Sudarsanam,emp_doj: 2011-06-06}, 

{id: 9,label: S Kamal,value: S Kamal, emp_doj: 2013-07-17},

{id: 15,label: R Malani,value: R Malani,emp_doj: 2014-01-03}

];*/

$( #pAdminName ).autocomplete({ 

    source: dataEmp,

    minLength: 1,

    select: function( event, ui ) {

        $( #hd ).val( ui.item.emp_id );

        return false;

    }       

});

});

html

<?php echo $form->text('pAdminName',$pAdminName,array('placeholder'=>'Enter or select a name from list')) ?>

<input type=hidden id=hd name=hd />

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marinal

Add To Favorites

Follow

Total Points: 655

Total Questions: 99

Total Answers: 99

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

answered 11 Years ago yvettel · Accepted Answer

I am adding another answer as this is a different approach than what was before

   $(#field).autocomplete({

        source: customers,

        minLength: 1,

        select: function(event, ui) {

            $(#field_id).val(ui.item.id);

        }

    });

I have added a field to show the id , so that you can fetch it to do whatever manipulation you want to do.

here is the link to the fiddle

http://jsfiddle.net/DLLVw/137/

Updated answer on doubt

Are you sure the value of dataEmp is in the same format as I have mentioned in the fiddle. you can check it in firebug console.

I think your json array is coming in the format of {name:Urban Development,id:1} wheras it should be {value:Urban Development, id:1}. Change name to value.