如何在两个不同的 HTML 元素之间拆分 jQuery 自动完成中返回的数据

Question

我需要一些关于jQuery自动完成的帮助。

基本上，我想在两个 HTML 元素之间拆分返回的每组数据。这是我的工作代码，它只在一个元素中返回整个数据：

var autocomp    =   jQuery.noConflict();
    autocomp(document).ready(function() {
        var aTags = ["ask<####>1","always<####>2", "all<####>3", "alright<####>4", "one<####>5", "foo<####>6", "blackberry<####>7", "tweet<####>8","force<####>9", "westerners<####>10", "sport<####>11"];
      autocomp('#category').autocomplete({
            source: aTags,
            open: function (e, ui) {
        var acData = autocomp(this).data('ui-autocomplete');
        acData
        .menu
        .element
        .find('li')
        .each(function () {
            var me = autocomp(this);
            var keywords = acData.term.split(' ').join('|');
            me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'));
        });
    }
        });
    });

该 HTML：

<div>
     <input type='text' name="category" id="category" >
</div>
<p class="a">You selected id: <span id="results"></span></p>

现在，我试图做的是仅显示category中的第一部分（<####>之前），results显示第二部分。

所以我想得到：

category value = 'ask'
results value = '1'

这是一个JSFiddle。

Answer 1

我建议你以对象数组的格式更改aTags数组。如果需要，这可以自动完成。

代码段：

var autocomp	=	jQuery.noConflict();
autocomp(document).ready(function() {
  var aTags = ["ask<####>1","always<####>2", "all<####>3", "alright<####>4", "one<####>5", "foo<####>6", "blackberry<####>7", "tweet<####>8","force<####>9", "westerners<####>10", "sport<####>11"];
  /****
            var newATags = [{label: "ask", value: "1"}, {label: "always", value: "2"}, {label: "all", value: "3"},
                {label: "alright", value: "4"}, {label: "one", value: "5"}, {label: "foo", value: "6"},
                {label: "blackberry", value: "7"}, {label: "tweet", value: "8"}, {label: "force", value: "9"},
                {label: "westerners", value: "10"}, {label: "sport", value: "11"}];
            **/
  newATags = aTags.map(function(currentValue, index, array) {
    var retVal = {};
    retVal.label = currentValue.substr(0, currentValue.indexOf('<'));
    retVal.value = currentValue.substr(currentValue.indexOf('>') + 1);
    return retVal;
  });
  autocomp('#category').autocomplete({
    source: newATags,
    select: function(e, ui) {
      var tmp = ui.item.label;
      ui.item.label = ui.item.value;
      ui.item.value = tmp;
      autocomp('#results').text(ui.item.label);
    },
    open: function (e, ui) {
      var acData = autocomp(this).data('ui-autocomplete');
      acData.menu.element.find('li').each(function () {
        var me = autocomp(this);
        var keywords = acData.term.split(' ').join('|');
        me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'));
      });
    }
  });
});

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div>
    <input type='text' name="category" id="category" >
</div>
<p class="a">You selected id: <span id="results"></span></p>