javascript - 如何使用 JQuery 将文本插入到基于关键字的数组中

Question

在一个 Web 项目中，我使用 jQuery 和 javascript 构建一个查询字符串，供用户在搜索工具中使用。由于这是由用户动态构建的，我从表单中获取字段和值，然后将其添加到一个数组，然后将其推送到 ui 中的搜索词。

在将此字符串传递给 UI 之前，我想根据关键字格式化字符串。 (例如，如果关键字 BETWEEN all caps)用于查询中，将此关键字(将有两个)后面的输入字段括在括号中。如果使用术语 CONTAINS，则用星号等包裹后续字段。在 JavaScript 中有一个 slice 函数，它允许我在数组的索引处插入文本。由于我在数组中寻找关键字而不是索引值，是否有另一种函数或方法可以支持这一点。

下面是将输入字段创建/解析为搜索词的代码

//insert field after between option or remove it if it exists
    function insertFromField(param1, param2, param3) {
        if (param1 == "BETWEEN") {
            $("<input class='queryterm' type='text'name='fieldValue1' id='fieldvalue1' value='' size='15' /><span>&nbsp;TO&nbsp;</span>").insertAfter(param2);
        }
        if (param3 <= 2) {
            // do nothing  
        }
        else {
            $(param2).next().remove();
            $(param2).next().remove();
        }
    }

    //build query string from Query Builder  //TODO formatting on string return 
    function setQueryString() {
        checkField();
        var txt = $("input[name='tbsearchterm']");
        var fields = $("#queryFields :input").serializeArray();
        jQuery.each(fields, function (i, field) {
            if (txt) {
                txt.val(txt.val() + field.value + " ");
            }
        });
    }

//the UI contains an add button so the user can build their query at runtime for that i have the following:

$('#add').click(function () {
        $("<div class='additionalrow'><select class='queryterm' name='condition'><option  value='AND'>AND</option><option value='OR'>OR</option></select>&nbsp;&nbsp;"+ 
        "<select class='queryterm' name='condition'>" +
        "<option  value='address:'>Address</option>" +
        "<option  value='age:'>Age</option>" +

... edited for Brevity


        "</select>&nbsp;&nbsp;<select name='operator'class='operClass'><option id='opt1'>Equals</option><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select>&nbsp;&nbsp;<input type='text' class='queryterm' name='fieldValue1' id='fieldvalue1' value='' size='25' />&nbsp;&nbsp;<a href='#' id='btnRemove'><span class='advButtons'>Remove</span></a></div>").appendTo('#queryFields');
    });

提前致谢

评论更新感谢您的回复以提供更多说明:1. 我希望最好使用 jQuery 来完成此操作，但如果 jQuery 不包含支持此操作的函数，我不反对使用 javascript。

2 & 3. Contains 总是有一个值。其中包含将始终有两个。在选择器下拉菜单中更改选择时调用函数 insertFromField

可以在此处查看完整的工作示例 jsFiddle

当您更改第二个选择器时，您会看到添加了额外的输入字段。这是由 insertFromField 函数触发的。这基本上评估整个 div 元素并计算输入字段的数量并相应地添加或删除一个。

我还添加了一些代码以允许您在 UI 中查看结果。

当使用单词 BETWEEN 时，预期的输出是在最后两个输入字段的值周围放置括号所以它看起来像这样:AND Address 123 main street BETWEEN (17 18)

抱歉没有早点想到Fiddle

Answer 1

给你:

function setQueryString() {
  checkField();
  var txt = $("input[name='tbsearchterm']");
  var hit_between=0;
  var hit_contains=false;
  var ops={
    normal:   ["" ," " ]
    ,contains:["*","* "]
    ,between1:["("," " ]
    ,between2:[" ",") "]
  }
  if (txt) {
    jQuery.each(fields, function (i, field) {
      var v=field.value;
      if (false) {
      }else if (v=="CONTAINS") {
        if (hit_contains==false) {hit_contains=true;return;
        }else{
          //bad input; do something
        }
      }else if (v=="BETWEEEN"){
        if (hit_between==0) {hit_between++;return;
        }else{
          //bad input; do something
        }
      }else{
        var op='normal';
        if (false) {
        }else if (hit_contains)  {hit_contains=false;op='contains';
        }else if (hit_between==1){hit_between++;     op='between1';
        }else if (hit_between==2){hit_between=0;     op='between2';
        }else{
        }
        var nv=ops[op][0]+v+ops[op][1];
        txt.val(txt.val() +nv);
      }
    });
  }
}