Jquery ui 自动完成多个输入字段和 ajax 结果

2024-04-29

我正在尝试做其他几个人在堆栈上已经完成的事情。我已经尝试了所有可用的示例,但似乎无法使其工作。我已经复制了工作示例并反映了与我的情况相匹配的更改,但仍然没有。

我使用的 HTML 看起来像这样。

<tr>
            <td><a id="remRow"><span class="icon icon-squared-cross"></span></a></td>
            <td><input type="hidden" data-type="itemID" name="itemID[]" id="itemID" class="form-control autocomplete_txt" autocomplete="off">
            <input type="text" data-type="item_name" name="item_name[]" id="item_name" class="form-control autocomplete_txt" autocomplete="off" placeholder="Item Name"></td>
            <td><input type="text" name="item_sku[]" id="item_sku" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" placeholder="SKU#"></td>
            <td><input type="text" name="item_qty[]" id="item_qty" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" placeholder="Qty"></td>
            <td><input type="text" name="item_rate[]" id="item_rate" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" placeholder="Cost"></td>
            <td><input type="text" name="balance[]" id="balance" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" placeholder="Balance"></td>
            </tr>

Jquery 我已经从工作源得到了演示

//autocomplete script
$(".autocomplete_txt").keyup(function(){
    type = $(this).data('type');
    if(type =='itemID' )autoTypeNo=0;
    if(type =='item_name' )autoTypeNo=1;    
    $(this).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url : 'ajax.php',
                dataType: "json",
                method: 'post',
                data: {
                   name_startsWith: request.term,
                   type: type
                },
                 success: function( data ) {
                     response( $.map( data, function( item ) {
                        var code = item.split("|");
                        return {
                            label: code[autoTypeNo],
                            value: code[autoTypeNo],
                            data : item
                        }
                    }));
                }
            });
        },
        autoFocus: true,            
        minLength: 0,
        select: function( event, ui ) {
            var names = ui.item.data.split("|");                        
            id_arr = $(this).attr('id');
            id = id_arr.split("_");
            element_id = id[id.length-1];
            $('#itemID_'+element_id).val(names[0]);
            $('#item_name_'+element_id).val(names[1]);
            /*$('#quantity_'+element_id).val(1);
            $('#price_'+element_id).val(names[2]);
            $('#total_'+element_id).val( 1*names[2] );*/
            calculateTotal();
        }               
    });
});

最后,PHP 来处理 json。

case "fetchAll": {

        $query = $db->rawQuery("SELECT itemID, item_name, item_sku FROM items ORDER BY item_name ASC");
        if($query) {
            $data = array();
            foreach($query as $key => $val) {
                //echo $val['itemID'];
                $name = $val['itemID'].'|'.$val['item_name'].'|'.$val['item_sku'];
                array_push($data, $name);
            }

            echo json_encode($out); 
        } else { echo "error"; }
    }
    break;

无论我使用什么示例,我都会不断收到未捕获的类型错误:无法读取未定义的属性“长度”。我尝试使用 jquery 3.0,并下载了最新的 jquery.ui,认为这可能是问题所在。我还尝试恢复到旧版本来检查这一点。

此时我确信我只是错过了一些东西。 3天有点荒谬,所以我寻求帮助。我知道堆栈上有类似的问题,是的,我已经尝试过所有这些问题。如果你还没准备好,猜猜我不太擅长 jquery。我可以让其他一切工作,甚至 ajax 调用,但是,这个......

Regards.


CL哈德曼:

尝试在您的 head 部分中使用以下脚本:

HTML 文件:

<head>

<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js'></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<script>

$( document ).ready(function() {

    //autocomplete script
    $(".autocomplete_txt").keyup(function(){
        type = $(this).data('type');
        if(type =='productCode' )autoTypeNo=0;
        if(type =='productName' )autoTypeNo=1;  
        $(this).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url : 'ajax.php',
                    dataType: "json",
                    method: 'post',
                    data: {
                       name_startsWith: request.term,
                       type: type
                    },
                     success: function( data ) {
                         response( $.map( data, function( item ) {
                            var code = item.split("|");
                            return {
                                label: code[autoTypeNo],
                                value: code[autoTypeNo],
                                data : item
                            }
                        }));
                    }
                });
            },
            autoFocus: true,            
            minLength: 0,
            select: function( event, ui ) {
                var names = ui.item.data.split("|");                        
                id_arr = $(this).attr('id');
                id = id_arr.split("_");
                element_id = id[id.length-1];
                $('#itemID_'+element_id).val(names[0]);
                $('#item_name_'+element_id).val(names[1]);
                /*$('#quantity_'+element_id).val(1);
                $('#price_'+element_id).val(names[2]);
                $('#total_'+element_id).val( 1*names[2] );*/
                calculateTotal();
            }               
        });
    });


  });




</script>
</head>

我无法复制您的场景,但您似乎与 jquery 脚本发生冲突。希望这可以帮助...

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery ui 自动完成多个输入字段和 ajax 结果 的相关文章

  • ZipArchives 存储绝对路径

    我可以使用相对路径压缩文件吗 例如 zip gt addFile c wamp www foo file txt ZIP 应该具有如下目录结构 foo gt file txt and not wamp gt www gt foo gt fi
  • PHPMailer:如何将 Content-Type 设置为 multipart/alternative

    我正在使用 phpmailer 发送电子邮件 但消息的标题中带有 Content Type text html 我怎样才能将其更改为多部分 替代 它应该类似于 mail gt 我的配置是 mail new PHPMailer mail gt
  • 使用 .add() 选择多个 jQuery 对象

    是否 add http api jquery com add 方法允许一次选择多个对象而不是一次添加一个 one add two add three add four on click function 以下变量的设置方式相同 因为每个变量
  • 不使用 PHP 提交联系表单

    我还是一名学生 今天我们的讲师告诉我们 无需使用 mailto 函数即可提交联系我们表单的唯一方法是使用 PHP 我发誓去年另一位讲师向我们展示了一种仅使用 javascript 的方法 是否可以使用基本表单和 javascript 提交反
  • Woocommerce 获取产品

    我使用以下代码从我的 WordPress 网站中的 WooCommerce 获取产品类别列表
  • 重复的“Access-Control-Allow-Origin: *”标头会破坏 CORS 吗?

    所以我们有一个提供 JSON 服务的 http 资源 它添加了一个 Access Control Allow Origin 旗帜 所以这可以用 CORS 加载 except 所以我被告知 有一些 IE9 怪癖 这意味着这在 IE9 中仍然不
  • 发布数据时维护 ViewBag 值

    我有一个逻辑问题需要回答 这是一个场景 在控制器中 ViewBag Name aaaa 在视野中 ViewBag Name 在我的控制器中 我为 ViewBag 设置了值 并从 VIew 中的 ViewBag 检索了值 现在在 View 中
  • 测试 jQuery UI 工具提示是否打开

    我正在尝试控制自动打开和关闭jQuery 工具提示 http api jqueryui com tooltip 如何测试工具提示的当前状态是否为打开 我正在使用所有内容的最新版本 Thanks 您可以尝试检查是否有任何课程ui toolti
  • 在 wampserver 2.2 上安装 php_imagick.dll PHP 扩展

    我使用的是 32 位操作系统的 Windows 7 我安装了 ImageMagick 6 8 7 Q16Link https www imagemagick org script download php windows我能够从命令行 转换
  • 增加内存限制时出现奇怪的错误

    我使用的是共享托管环境 PHP 的默认内存限制是 32M 我在 Concrete5 设置方面遇到一些问题 当我尝试登录 Concrete5 的管理面板时 出现内存限制错误Allowed memory size of 33554432 byt
  • knockoutjs通过点击事件获取元素id

    我正在使用 knockoutjs 目前我认为有些东西看起来像这样 img src images image1 png 这允许我获取视图模型中的元素 ID pressedTab function tab console log Element
  • 从远程托管上的 PHP 获取 PHP 错误日志

    是否有 PHP 函数或其他方式以字符串形式获取 PHP 错误日志 我需要这个 因为我无法访问在其他人的服务器上运行的站点的错误日志 他提出通过电子邮件将错误日志发送给我 但这不太方便 有什么方法可以将错误日志输出到 PHP 页面吗 我意识到
  • ASP.NET JQuery AJAX POST 返回数据,但在 401 响应内

    我的应用程序中有一个网页 需要调用我设置的 Web 服务来返回对象列表 这个调用是这样设置的 document ready function var response ajax type POST contentType applicati
  • PHP 启动:无法加载动态库 php5.4.3/ext/php_ffmpeg.dll 不是有效的 Win32 应用程序

    再会 我尝试在 Windows 7 计算机上安装 dll 文件 php ffmpeg 但不断收到此错误 29 Jan 2013 11 37 00 UTC PHP Warning PHP Startup Unable to load dyna
  • 为什么我的浮点数大于 1 时在 MYSQL 中存储为 .9999?

    我将进程时间作为 float 4 4 存储在 MySQL 数据库中 start time microtime TRUE things happen in my script end time microtime TRUE process t
  • node-mongodb-native的插入性能

    我正在使用 MongoDB 测试 Node js 的性能 我知道其中每一个都很好 彼此独立 但我正在尝试一些测试来感受它们 我遇到了这个问题 但无法确定来源 问题 我正在尝试在单个 Node js 程序中插入 1 000 000 条记录 它
  • jQuery 如何实现延迟滑动?

    我正在使用以下 jQuery div 框向上滑动 5 秒后淡出 有没有办法实现这一点 因为该框需要很长时间才能出现 document ready function load limit slideUp 500 have tried fast
  • Javascript/jQuery 外部高度()

    Does idOfLememt outerHeight 对所有浏览器产生相同的结果 IE7 有什么不同吗 只要去http api jquery com outerHeight http api jquery com outerHeight
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo
  • 纯旧 PHP 对象 (POPO) 一词的确切含义是什么?

    我想了解一下波波 我搜索了 popo 发现它代表 Plain Old Php Object 但我不确定 Plain Old Php Object 的确切含义 我想知道什么是 popo 以及在哪里使用它 谢谢 普通旧 在此处插入语言 对象是一

随机推荐