1

我有一个表单，用户键入名称并自动完成填充文本输入。它适用于以下代码：

var names = [<?php 
    $tmp = Array();
    foreach($usernames as $row) 
    $tmp[] = '"'.$row->firstname.' '.$row->lastname.'"'; 
    echo join(',', $tmp);
?>];

$( "#employee" ).focus().autocomplete();

和

<input type="text" name="employee" id="employee" class="required"/>

我现在正试图更进一步，将用户 ID 填充到隐藏字段中，但我正在努力。names 数组很好，但它不再呈现自动完成，所以当你开始输入时，什么都不会出现。（这在模态中使用）。

这是我要使用的代码，有人知道为什么我不能让它工作吗？

<input type="text" name="employee" id="employee" class="required"/>
<input type="hidden" name="employee_id" id="employee_id" class="required"/>

JS

    $(function() {
    var names = [<?php 
    $tmp = Array();
    foreach($usernames as $row) $tmp[] = 
    '{
                value: "'.$row->firstname.' '.$row->lastname.'",
                label: "'.$row->firstname.' '.$row->lastname.'",
                desc: "'.$row->id.'",
    }'; 
    echo join(',', $tmp);
?>];
    });

$(document).ready(dialogForms);
function dialogForms() {    
 $('a.menubutton').click(function() {
    var a = $(this);
    $.get(a.attr('href'),function(resp){
      var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
      $('body').append(dialog);
      dialog.find(':submit').hide();
      dialog.dialog({
        title: a.attr('title') ? a.attr('title') : '',
        modal: true,
        buttons: {
          'Save': function() {
                submitFormWithAjax($(this).find('form'));
                $(this).dialog('close');
                },
          'Cancel': function() {$(this).dialog('close');}
        },
        close: function() {$(this).remove();},
        width: 600,
        height: 500,        
        show: "fade",
        hide: "fade"
      });



        $( "#employee" ).autocomplete({
            minLength: 0,
            source: names,
            focus: function( event, ui ) {
                $( "#employee" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#employee" ).val( ui.item.label );
                $( "#employee_id" ).val( ui.item.desc );
                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "</a>" )
                .appendTo( ul );
        };


var $ac_start_date = '<?php echo $ac_end_date ?>',
    $ac_start_date_flip = '<?php echo $ac_end_date_flip ?>',
    $ac_start_parsed = Date.parse($ac_start_date),
    _today = new Date().getTime();

// For Opera and older winXP IE n such
if (isNaN($ac_start_parsed)) { 
    $ac_start_parsed  = Date.parse($ac_start_date_flip);
}

var _aDayinMS = 1000 * 60 * 60 * 24; 

// Calculate the difference in milliseconds
var difference_ms = Math.abs($ac_start_parsed - _today);

// Convert back to days and return
var DAY_DIFFERENCE = Math.round(difference_ms/_aDayinMS);       
// do initialization here
$("#startdate").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '0:+100',
            minDate: '+1d',         
            maxDate: '+' + DAY_DIFFERENCE + 'd'
});

// do initialization here
$("#enddate").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '0:+100',
            minDate: '+1d',         
            maxDate: '+' + DAY_DIFFERENCE + 'd'
});

$("#doc").datepicker();

}, 'html');
return false;
});
}

function submitFormWithAjax(form) {
  form = $(form);
  $.ajax({
    url: form.attr('action'),
    data: form.serialize(),
    type: (form.attr('method')),
    dataType: 'script',
    success: function(data){
    $(this).dialog('close');
    // Refresh table
   }
  });
  return false;
}
4

1 回答 1

1

你可以使用 tagit 来做到这一点。我认为这是一个不错的选择，你可以实现你所需要的

检查这个 ->我们如何使用 Jquery tagit 获取选定标签的 ID？

于 2012-09-10T08:59:19.070 回答