Javascript ajax fill issue

I am working on a module and have copied the formatting off other pages but it does not seem to work. Is is meant to get the value from House Location and create a page slug in the box underneath. The Form class is crud and I can't get any error with Firebug.

Controller Function:

function stream_slug()
{
    $this->load->helper('text');

    $this->output->set_output( url_title($this->input->post('location'), 'underscore', TRUE) );
}

HTML:

<label for="location">House Location:</label> <input type="text" name="location" value="" maxlength="250" /><span class="required-icon tooltip">Required</span></li> 

<li class="even"> 
<label for="slug">House Slug</label> 
<input type="text" name="slug" value="" maxlength="60" /><span class="required-icon tooltip">Required</span> 
</li> 

jQ开发者_JS百科uery:

(function($) {
    $(function(){

        form = $('form.crud');

        $('input[name="location"]', form).keyup($.debounce(300, function(){

            slug = $('input[name="slug"]', form);

            $.post(BASE_URI + 'index.php/admin/sales/stream_slug', { title : $(this).val() }, function(new_slug){
                slug.val( new_slug );
            });
        }));

    });
})(jQuery);

Updated jQuery:

(function($) {
    $(function(){

        form = $('form.crud');

        form.find('input[name="location"]', form).keyup($.debounce(function(){

            slug = $('input[name="slug"]', form);

            $.ajax(BASE_URI + 'index.php/admin/sales/stream_slug', { title : $(this).val() }, function(new_slug){
                slug.val( new_slug );
            });
        }, 300));

    });
})(jQuery);

debounce:

/*
 * jQuery throttle / debounce - v1.1 - 3/7/2010
 * http://benalman.com/projects/jquery-throttle-debounce-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

My first guess is that you have the arguments for $.debounce backwards:

$.debounce(fn, timeout, [invokeAsap], [ctx]);

Try using:

$('input[name="location"]', form).keyup($.debounce(function() {
    //...
}, 300));

I'd also suggest that you switch from

$('input[name="location"]', form)

to

from.find('input[name="location"]')

so that the form doesn't get visually lost at the right side but this is just a stylistic issue and subject to personal preference (unlike the argument order of external APIs).