Question

我在文本框中编写了自动完成代码。我的问题是如何根据自动完成选择为禁用的文本框分配值。我有两个实体产品名称和产品价格。产品名称处于自动填充状态。产品价格应根据自动完成选择动态变化。

<tr>
  <td class="header" align="left" valign="top">
   Enter the product<span class="required">*</span>
  </td>
  <td>
   <input class="text" type="text" name="product" id="tag" value="" align="left"  size="75" maxlength="80">
  </td>
  <td class="header" align="left" valign="top">
    price
 </td><td>
   <input class="text" disabled type="text" name="price"  value="" align="left" size="75" maxlength="80">
 </td>
 </tr>

Jquery自动完成（autocomplete.php回应我的产品的值说xyz abc def）

<script>
 $(document).ready(function(){
 $("#tag").autocomplete("autocomplete.php", {
    selectFirst: true
 });
});
 </script>

我应该回复我的autocomplete.php作为xyz 100 abc 212 def 200吗？任何帮助都将受到高度赞赏

Answer 1

您需要使用选择功能。

$("#tag").autocomplete("autocomplete.php", {
    source: "your link to the json feed here",
    selectFirst: true
    select: function( event, ui ) {
       $( "#element_needs_editing" ).val(ui.item.value);
       return false;
    }
 });

此外，您需要编辑autocomplete.php是json格式。使用value字段，它可能包含文本或id或其他内容。使用该数组，您可以向首页发送多个变量。最好是将结果加载到数组中并使用json_encode($array);

将其回显

您的搜索输出需要采用json格式。实现此目的的最佳方法是将所有搜索结果值加载到数组中并通过json_encode发送。

<?php
//A simple array
$data = array();
$data[0]['value'] = 1;
$data[0]['item_code'] = "A001";
$data[0]['price'] = 15;
$data[1]['value'] = 2;
$data[1]['item_code'] = "A002";
$data[1]['price'] = 20;
echo json_encode($data);
?>

以上将导致jquery将使用的以下输出。

[{"value":1,"item_code":"A001","price":15},{"value":2,"item_code":"A002","price":20}]

现在，如果你想参考“商品代码”，你只需要参考

$( "#element_with_item_code" ).val(ui.item.item_code);

或价格

$( "#element_with_price" ).val(ui.item.price);

Answer 2

尝试这样的事情

        $(document).ready(function(){
             $("#tag").autocomplete("autocomplete.php", {
                selectFirst: true,
                select: function( event, ui ) {
                    if(ui.item){
                        document.getElementsByName('price')[0].value = ui.item.value
                    }
                }
             });
        })

选择自动完成时，禁用文本框的Ajax变换值

2 个答案: