CE 1.9.2.4 - Custom Address adminhtml field input

Question

I'm working on a Magento site meant for employees from different departments within a company to purchase goods. I've created an installer to create the address attributes which shows correctly in the Admin Customer Create/Edit screen as depicted:

The idea here is that the admin person should start typing in the Department field, and it should bring up an auto-suggest list. Selecting the appropriate option should auto-populate the Department ID field, which is what is required by the Stores Office to deliver internally.

I already have the Departments and associated data set up via a module which created my database table for me.

I can do the jQuery auto-suggest and JSON data lookup required, but I'm totally unsure how to customize the Department field (jQuery function triggered for keyUp event) and to make the Department ID input read-only.

Would someone be kind enough to point me in the right direction? Thank you!

EDIT: I was contemplating editing the app/design/adminhtml/default/default/template/customer/tab/addresses.phtml file and injecting my jQuery in there, but I don't think that would be the proper way to do it.

Answer 1

Try something like this:

Download jquery and save it to js/jquery directory

create a new js file js/custom/customPopulate.js and add below content.

jQuery(document).ready(function(){
   alert(' add your auto suggest function here!!'); 
});

Now Open app/design/adminhtml/default/default/layout/local.xml, <create if not there.>

<layout>
<adminhtml_customer_edit>
    <reference name="head">
        <action method="addItem">
            <type>js</type>
        <!-- Jquery file path here-->
            <name>jquery/JQUERY_FILE_NAME.js</name>
        </action>
        <action method="addItem">
            <type>js</type>
            <name>custom/customPopulate.js</name>
        </action>
    </reference>
</adminhtml_customer_edit>

hope this helps!