使用jquery自动完成组合框

时间:2017-01-21 08:23:37

标签: javascript jquery combobox autocomplete

我使用jquery使用autocompete组合框有问题。在这里,我动态添加新的组合框。有一个添加按钮功能可以动态添加组合框。

我的自动完成功能在所有组合框中工作正常,但问题是每当我在任何组合框上触发事件时,操作都会发生在最后一个组合框中。组合框索引存在问题。我已经在函数setDamagedVehicle(status)中编写了widget代码,这样我就可以跟踪每个组合框但它不起作用。每当我点击添加按钮时,函数setDamagedVehicle(status)被调用并且工作正常但juery代码仅在最后一个状态值上执行。请帮我跟踪每个组合框。我无法在隐藏变量中保存正确的值。我在这里使用struts框架。

<script language="JavaScript" type="text/javascript">
    function setDamagedVehicle(status){
      //Here I have written the at widget code so that I can track each and every combobox using the status value.            
     (function( $ ) {
         $.widget( "ui.combobox", {
              _create: function() {
                this.wrapper = $( "<span>" )
                  .addClass( "custom-combobox" )
                  .insertAfter( this.element );

                this.element.hide();
                this._createAutocomplete();
                this._createShowAllButton();
              },

             _createAutocomplete: function() {
                    // some statements
                    this._on( this.input, {
                    autocompleteselect: function( event, ui ) {
                    ui.item.option.selected = true;
                    this._trigger( "select", event, {
                    item: ui.item.option
                    });
                    var selectedObject = ui.item.value;
                    var selectedObjectCode = ui.item.option.value;
                    $( "#vehicleObjectCodeText-"+status ).val(selectedObjectCode);                        
                    $( "#objectValueText-"+status ).val(selectedObject.trim());                         
                    var selectBox = document.getElementById('claimObjectCombo-'+status);

               // saving selected item in form through hidden selectedIndexText field
               for(var i = 0, j = selectBox.options.length; i < j; ++i) {
                    if(selectBox.options[i].innerHTML === selectedObject) {
                          $( "#selectedIndexText-"+status).val(i);
                           break;
                          }
                    }
              },

            });

          },   /* _createAutocomplete close */
      _createShowAllButton: function() {
          // fine
       },
     _source: function( request, response ) {
          //fine
       },
     _destroy: function() {
          // fine
      }
     });     /* widget close */
    })( jQuery );   /* function close */ 

}
 $(function() {
       $( ".objectComboBox" ).combobox();
 });
</script>

<logic:iterate collection="${claimNotificationForm.vehicles}" id="vehicle" property="vehicles" indexId="vehicleIndex">
<td class="tiivis">
   <div class="ui-widget">
     <!-- hidden element with vehicleObjectValue is set to save selected vehicle code before form submit -->
    <html:hidden property="vehicleObjectValue[${vehicleIndex}]" styleId="objectValueText-${vehicleIndex}"/>
    <!-- hidden element with selectedIndex is set to save selected vehicle index before form submit -->
     <html:hidden property="selectedIndex[${vehicleIndex}]" styleId="selectedIndexText-${vehicleIndex}"/>
     <html:hidden property="vehicleObject[${vehicleIndex}]" styleId="vehicleObjectCodeText-${vehicleIndex}"/>
    <html:select  property="vehicleObject[${vehicleIndex}]" styleId="claimObjectCombo-${vehicleIndex}" styleClass="objectComboBox" onkeypress="enterStopper(event);">
    <!-- values are getting from other system and this is working fine -->
    <vehicles:optionsCollection property="objectTypes"  sort="true"    chooseKey="000" chooseResourceKey="page.claim.search.object.name"/>
    </html:select>
  </div>    
 </td>

<script language="JavaScript" type="text/javascript">
         setDamagedVehicle(${vehicleIndex});
</script>
</logic:iterate>

0 个答案:

没有答案