-1

DBから値を選択するための汎用オートコンプリートを開発しています（製品名のリストからProductIDを選択すると考えてください）

一部のタイプでは、リストをフィルタリングして検証するために追加のパラメーターが必要なためdata-params、フォームからデータをキャプチャする（または固定する）ためのフィールドが入力にあります

入力でこの構文を使用してajax呼び出しをフィードしようとしていますdata-params='{ProductType1: $("#ProductType1"), ProductType2: $("#ProductType2")}'が、次のエラーが発生しました：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

eval（ネイティブオブジェクトが登場する前に） JSONを実行する方法と同様にJSON、解析しようとしている文字列を次のように括弧で囲む必要があります。

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

そうは言っても、ここでやろうとしていることを行うためのより良い方法がなければなりません。たぶん、データ属性に要素のIDを入れて、実際の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 に答える