-1

我正在开发一个通用的自动完成功能，用于从数据库中选择值（考虑从产品名称列表中选择 ProductID）

由于某些类型需要额外的参数来过滤和验证列表，我有一个data-params在输入中有一个字段来捕获表单中的数据（或固定的）

我正在尝试data-params='{ProductType1: $("#ProductType1"), ProductType2: $("#ProductType2")}'在输入中使用此语法提供 ajax 调用，但出现此错误：Uncaught SyntaxError: Unexpected token :

仅使用 1 个参数可以正常工作：
data-params='{ProductType1: $("#ProductType1")}'

在此处输入图像描述

jsBin 供你尝试

http://jsbin.com/atamez/1/edit

这是html

<form>
    <input type="text" id="ProductType1" name="ProductType1" value="123">
    <input type="text" id="ProductType2" name="ProductType2" value="456">
<p>
    <span class="superlist">
    <input type="hidden" id="ProductID" name="ProductID" value="0">
    <input type="text" id="Product" name="Product" value="" style="Width: 150px;" 
         class="superlistinput" 
         data-controller="Products" 
      data-params='{ProductType1: $("#ProductType1"), ProductType2: $("#ProductType2") }'>
  </span>
  </p> 
</form>

Javascript

$(function () {
    $('.superlistinput').each(function (i, el) {
        dosuperlistinput(el);
    });
});

function dosuperlistinput(el) {
    el = $(el);
    el.autocomplete({
        minLength: 0,
        source: function(request, response) {
            $.ajax({
              url: '/' + el.data("controller") + '/Lista/?term=' + request.term,
                dataType: 'json',
                data: eval(el.data("params")),
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function (event, ui) {
            el.prev().val(ui.item.ID);
            el.val(ui.item.Nombre);
            return false;
        },
        change: function (event, ui) {
            el.removeClass('superlistinvalid');
            if (!ui.item) {
                var valoractual = el.val();
                $.getJSON('/' + el.data("controller") + '/ListaValidar/' + valoractual,
                    eval(el.data("params")),
                    function (json) {
                        var valid = false;
                        if (json.length > 0) {
                            el.prev().val(json[0].ID);
                            el.val(json[0].Nombre);
                            valid = true;
                        }
                        if (!valid) {
                            // it didn't match anything
                            el.addClass('superlistinvalid');
                            el.prev().val("0");
                        }
                        return false;
                    }
                );
            }
        }
    })
    .data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
          .data("item.autocomplete", item)
          .append('<a>' + item.Nombre + (item.ExtraInfo === null ? '' : '<div><i>' + item.ExtraInfo + '</i></div>') + '</a>')
          .appendTo(ul);
    };

    el.keyup(function (event) {
        if (event.keyCode != '13' && event.keyCode != '9') {
            el.prev().val(0).trigger('change');
        }
    });

    addbuttonautocomplete(el);

}

function addbuttonautocomplete(el) {
    el = $(el);
    $('<button type="button">&nbsp;</button>')
        .attr('tabIndex', -1)
        .attr('title', 'Mostrar todos los items')
        .insertAfter(el)
        .button({
            icons: {
                primary: 'ui-icon-triangle-1-s'
            },
            text: false
        })
        .removeClass('ui-corner-all')
        .addClass('ui-corner-right ui-button-icon autocompletebutton')
        .click(function (event) {
            event.preventDefault();

            // close if already visible
            if (el.autocomplete('widget').is(':visible')) {
                el.autocomplete('close');
                return;
            }

            el.autocomplete('search', '');
            el.focus();
        });
}
4

2 回答 2

1

与使用 JSON 的方式类似eval（在本机JSON对象出现之前），您需要在要解析的字符串周围添加括号，如下所示：

data: eval("("+eval(el.data("params"))+")")

话虽如此，必须有更好的方法来做你想做的事情。也许您可以将元素的 ID 放在 data 属性中，然后从实际的 JavaScript 中调用？

于 2013-03-07T18:33:28.213 回答
1

我认为你做错了，你不应该使用代码来表示动态数据，而只是使用数据。例如，存储id您想要从中获取值的元素（以及您现在如何拥有它，您甚至没有仅获取 jQuery 元素的值），例如
data-params='{"ProductType1": "#ProductType1", "ProductType2": "#ProductType2"}'

现在您可以检索属性并设置值。

var data = {};
var params = el.data("params");
for (var prop in params){
    data[prop] = $(params[prop]).val();
}
...
    data:data,
...
于 2013-03-07T19:01:14.310 回答