0

嗨，我有以下代码，其中我使用 jquery 来实现自动完成功能。

       <div class="row">
           <p class="hint"><?php echo bfstring('tooltip_billing_state_zip'); ?></p>
           <label>State<span>*</span></label>
           <div>
           <select name="jc_state" class="required"></select>
              </div>    
              <div class="cl">&nbsp;</div>
              <em class="status"></em>
              </div>
              <div class="row">
            <p class="hint"><?php echo bfstring('tooltip_billing_state_zip'); ?></p>
            <label>ZIP/Postal Code <span>*</span></label>
 <input type="text" class="field required blink" value="Zip Code" title="Zip Code" name="jc_zip" id="jc_zip"/>
        <div class="cl">&nbsp;</div>
        <em class="status"></em>
     </div>
      <div class="row">
   <p class="hint"><?php echo bfstring('tooltip_billing_country'); ?></p>


     <label>Country <span>*</span></label>

           <select name="jc_country" class="required">
                         <option value="">Please Select</option>

       <?php foreach ($countries as $cid => $c) : ?>
    <option <?php echo ($cid == '840') ? 'selected="selected"' : ''; ?> value="<?php echo $cid; ?>"><?php echo $c['name']; ?></option>
               <?php endforeach; ?>
       </select>

  <div class="cl">&nbsp;</div>
  <em class="status"></em>
                                        </div>

                                    </div>
    <script type="text/javascript">

        zipAutoComplete112('jc');

    function zipAutoComplete112(prefix){
    alert(1);   
        jQuery( "#"+prefix+"_zip" ).autocomplete({

            source: function( request, response ) {
                jQuery.ajax({
                    url: "http://ws.geonames.org/postalCodeSearchJSON",
                    dataType: "jsonp",
                    data: {
                        style: "full",
                        maxRows: 12,
                        postalcode_startsWith: request.term
                    },
                    success: function( data ) {
                    alert(3);


    response( jQuery.map( data.postalCodes, function( item ) {
            return {
     label: item.placeName + (item.adminCode1 ? ", " + item.adminCode1 : "") + ", " + item.postalCode + ", "+item.countryCode,
        value: item.postalCode
            }
     }));


                                        jQuery('.ui-autocomplete').css('width', '188px');
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                var myString= new String(ui.item.label);
                var address = myString.split(',')

                jQuery('#'+prefix+'_city').val(address[0]);
                jQuery('#'+prefix+'_city').addClass('activated');
                jQuery('#'+prefix+'_city').trigger('change');
                jQuery('#'+prefix+'_city').parents('.row').addClass('ok-row')



    var countryCode = address[3] ? address[3]: address[2] 
     countryCode     = jQuery.trim(countryCode);
     var countryName = jQuery('#'+prefix+'_country option[value="'+jQuery.trim(countryCode)+'"]').text()
     jQuery('#countryContainer .jqTransformSelectWrapper span').html(countryName)  
     jQuery('#countryContainer .jqTransformSelectWrapper').addClass('selected-jqtranform');
     jQuery('#'+prefix+'_country').parents('.row').addClass('ok-row') 
     jQuery('#'+prefix+'_country').val(jQuery.trim(countryCode)) 



            var stateCode = address[2] ? address[1]: '';
                stateCode    =  jQuery.trim(stateCode)
                if(countryCode == 'US'){
                    jQuery.ajax({
                        url: base_url+"/getStateName",
                        dataType: "jsonp",
                        data: { stateCode: stateCode },
                        success: function( data ) {                                 
                            stateName = data  
                            jQuery('#'+prefix+'_state').val(stateName);
                            jQuery('#'+prefix+'_state').addClass('activated');

                            jQuery('#'+prefix+'_state').parents('.row').addClass('ok-row')
                            jQuery('#'+prefix+'_state').trigger('change');
                            formValidate();
                        }
                    });
                }else{
                    stateName = stateCode  
                    jQuery('#'+prefix+'_state').val(stateName);
                    jQuery('#'+prefix+'_state').addClass('activated');

                    jQuery('#'+prefix+'_state').parents('.row').addClass('ok-row')
                    jQuery('#'+prefix+'_state').trigger('change');
                    formValidate();
                }
                jQuery('#'+prefix+'_zip').parents('.row').addClass('ok-row')
                jQuery('#'+prefix+'_zip').parents('.row').removeClass('error-row');
            },
            open: function() {
                jQuery( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                jQuery( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    }

    </script>

当我运行此代码时，我在 firebug 中收到错误，因为 jQuery(..).autocomplete 不起作用。我不知道我要去哪里错了。请帮助我。提前致谢。

4

2 回答 2

1

我认为您正在使用 JQuery UI，您是否包含它？

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
于 2012-12-15T13:43:16.727 回答
0

确保包含 jquery ui 和 jquery 的 js 库。并且 jquery.js 不能重复或在其他 js 库文件之后。将它放在所有脚本标签之前。

于 2012-12-15T13:57:11.307 回答