Как бы я добавил .делегировать эту внешнюю функцию автозаполнения?

ProgramBox

Как бы я добавил .делегировать эту внешнюю функцию автозаполнения?

Post author:admin
Запись опубликована:20 февраля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

Я только что узнал.делегируйте сегодня, и я знаю, что меня можно использовать для того, что я хочу, но я не уверен, как бы я добавил это сюда.

Каждая строка при добавлении должна иметь возможность использовать .autocomplete, все они используют одни и те же данные.

 <html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('#field1').val("");
$('#field2').val("");
$('#field3').val("");
$('#field4').val("");


$("#field1").autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $('#field1').val(ui.item.field1);
                    $('#field2').val(ui.item.field2);
                    $('#field3').val(ui.item.field3);
                    $('#field4').val(ui.item.field4);

                }
            });
     }); 

</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="field1" type="text" id="field1" size="15" tabindex="1"></td>
    <td><input name="field2" type="text" id="field2" size="15"></td>
    <td><input name="field3" type="text" id="field3" size="15"></td>
    <td><input name="field4" type="text" id="field4" size="15"></td>
    <td><input name="qty"    type="text" id="qty"    size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input name="field1" type="text" id="field1" size="15" tabindex="1"></td><td><input name="field2" type="text" id="field2" size="15"></td><td><input name="field3" type="text" id="field3" size="15"></td><td><input name="field4" type="text" id="field4" size="15"></td><td><input name="qty"    type="text" id="qty"    size="15" tabindex="2"></td><td><button class="removeLine">Delete</button></td></tr></table>');
    });

</script>
</body>
</html>

Работает на 1/2 пути. Я не могу снова использовать .autocomplete, но это неправильно. Я снова заполняю все поля.

 <html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('.field1').val("");
$('.field2').val("");
$('.field3').val("");
$('.field4').val("");

$("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $('.field1').val(ui.item.field1);
                    $('.field2').val(ui.item.field2);
                    $('.field3').val(ui.item.field3);
                    $('.field4').val(ui.item.field4);

                }
            });
     }); 
});
</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input class="field1" type="text" size="15" tabindex="1"></td>
    <td><input class="field2" type="text" size="15"></td>
    <td><input class="field3" type="text" size="15"></td>
    <td><input class="field4" type="text" size="15"></td>
    <td><input class="qty"    type="text" size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input class="field1" type="text" size="15" tabindex="1"></td><td><input class="field2" type="text" size="15"></td><td><input class="field3" type="text" size="15"></td><td><input class="field4" type="text" size="15"></td><td><input class="qty"    type="text" size="15" tabindex="2"></td><td><button class="removeLine">Delete</button></td></tr></table>');
    });

</script>
</body>
</html>

РАБОЧИЙ ПРИМЕР!

 <html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('.field1').val("");
$('.field2').val("");
$('.field3').val("");
$('.field4').val("");

$("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $(this).closest('tr').find('.field1').val(ui.item.field1);
                    $(this).closest('tr').find('.field2').val(ui.item.field2);
                    $(this).closest('tr').find('.field3').val(ui.item.field3);
                    $(this).closest('tr').find('.field4').val(ui.item.field4);

                }
            });
     }); 
});
</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
 <tr>
    <td><input class="field1" type="text" size="15" tabindex="1"></td>
    <td><input class="field2" type="text" size="15"></td>
    <td><input class="field3" type="text" size="15"></td>
    <td><input class="field4" type="text" size="15"></td>
    <td><input class="qty"    type="text" size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"> <tr>    <td><input class="field1" type="text" size="15" tabindex="1"></td>    <td><input class="field2" type="text" size="15"></td>    <td><input class="field3" type="text" size="15"></td>    <td><input class="field4" type="text" size="15"></td>    <td><input class="qty"    type="text" size="15" tabindex="2"></td>    <td><button class="removeLine">Delete</button></td>  </tr></table>');
    });

</script>
</body>
</html>

1. во-первых, у вас не может быть более одного элемента (поля) с одинаковым идентификатором. Если вы планируете иметь более одной строки в своей таблице, вы можете изменить идентификаторы на классы (id=»field1″ -> class=»field1″). Наконец, почему бы вам не использовать строку «th» для заголовка и не переместить класс «orderline» в «tds» ( <td class="orderLine"> )

Ответ №1:

Предполагая, что поля имеют класс «field», должно работать что-то вроде этого.

 $("body").delegate(".field:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete(options);
});

Редактировать: я не понимал, что в коде есть что-то еще, поэтому я не видел html ниже. Спасибо Розелану за указание на это. Проблема с дублирующимся идентификатором определенно будет проблемой, но опубликованный мной код делегата должен стать хорошей отправной точкой для выяснения, как динамически применять плагин к элементу, который добавляется с помощью ajax. После этого вам просто нужно решить проблему с дублирующимся идентификатором.

Редактировать в ответ на комментарий:

Эта строка и похожие строки

 $('.field1').val(ui.item.field1);

должно быть

 $(this).closest('tr').find('.field1').val(ui.item.field1);
$(this).closest('tr').find('.field2').val(ui.item.field2);
$(this).closest('tr').find('.field3').val(ui.item.field3);
$(this).closest('tr').find('.field4').val(ui.item.field4);

Редактировать: добавление некоторой оптимизации:

 var $tr = $(this).closest('tr');
$tr.find('.field1').val(ui.item.field1);
$tr.find('.field2').val(ui.item.field2);
$tr.find('.field3').val(ui.item.field3);
$tr.find('.field4').val(ui.item.field4);

1. Это хорошо работает на «field1». Как мне заполнить другие поля, поскольку они теперь пустые?

2. Просто примените тот же метод для доступа к трем другим полям и заполните их.

Ответ №2:

Я немного изменил ваш код. это должно сработать (конечно, не тестировал ^^)

 <html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>

<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<div id="orderForm">
<table id="orderTable" width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <th>FIELD 1</th>
        <th>FIELD 2</th>
        <th>FIELD 3</th>
        <th>FIELD 4</th>
        <th>QTY</th>
    </tr>
    <tr class="orderLine">
        <td><input name="field1" type="text" class="field field1" size="15" tabindex="1"></td>
        <td><input name="field2" type="text" class="field field2" size="15"></td>
        <td><input name="field3" type="text" class="field field3" size="15"></td>
        <td><input name="field4" type="text" class="field field4" size="15"></td>
        <td><input name="qty"    type="text" id="qty"    size="15" tabindex="2"></td>
        <td><button class="removeLine">Delete</button></td>
    </tr>
</div>
</table>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">
$(function() {
    $('.field').val("");

    /* with this method no need to put the first line in the table, I would use this is the table comme "empty"
    var $newLine = $('
        <tr class="orderLine">
            <td><input name="field1" type="text" class="field field1" size="15" tabindex="1"></td>
            <td><input name="field2" type="text" class="field field2" size="15"></td>
            <td><input name="field3" type="text" class="field field3" size="15"></td>
            <td><input name="field4" type="text" class="field field4" size="15"></td>
            <td><input name="qty"    type="text" id="qty"    size="15" tabindex="2"></td>
            <td><button class="removeLine">Delete</button></td>
        </tr>
    ');
    $newLine.appendTo('orderTable'); 
    */

    // this method good with first 'td' line in table
    var $newLine = $('#orderTable').children('tr').eq(1).clone();

    // if I remember correctly, autocomplete appends to the body. 
    // hence, no need to reasign it to the "newlines"
    $(".field").autocomplete({
        source: "PRODUCT.ORDER.QUERY.php",
        minLength: 2,
        autoFocus: true,
        select: function(event, ui) {
            /*
            $('.field1', this).val(ui.item.field1);
            $('.field2', this).val(ui.item.field2);
            $('.field3', this).val(ui.item.field3);
            $('.field4', this).val(ui.item.field4);
            */

            for ( var field in ui.item ) {
                $('.' field, this).val(ui.item[field]); //maybe you have to replace "this" by "event.target"
            }
        }
    });


    $("#orderForm").delegate(".removeLine", "click", function () {
        $(this).closest('.orderLine').remove();
    }); 

    // This removes all newLine table rows
    $("#removeAll").click(function () {
        $('.orderLine').remove();
    });

    //ADDS the 'newLine' table rows
    $("#orderForm").delegate('#addLine', 'click', function () {
        $('#orderForm').append($newLine);
    });
});

</script>
</body>
</html>