Question

我想在单个文本框中获取多个表达式，下面是我的代码。

<html>
<body>
    <input type="text" style="width:250px" id="txtSearch" />
    <ul id="ul1" style="display:none;">
        <li id="letters">Letter</li>
        <li id="words">Word</li>
    </ul>
    <ul id="ul2" style="display:none;">
        <li id="letterA">A</li>
        <li id="letterB">B</li>
        <li id="letterC">C</li>
        <li id="letterD">D</li>
        <li id="letterE">E</li>
        <li id="letterF">F</li>
        <li id="letterG">G</li>
        <li id="letterH">H</li>     
        <li id="letterI">I</li>
    </ul>
    <ul id="ul3" style="display:none;">
        <li id="wordA">Apple</li>
        <li id="wordB">Ball</li>
        <li id="wordC">Cat </li>
        <li id="wordD">Dog</li>
        <li id="wordE">Egg</li>
        <li id="wordF">Fish</li>
        <li id="wordG">Gun</li>
        <li id="wordH">Hat</li>
        <li id="wordI">Ice</li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        document.getElementById('txtSearch').onkeypress = function (e) {
            if (e.keyCode === 64 && 107) {
                $('#ul1').css("display", "inline");
            } else {
                return false;
            }
        };
        $(document).ready(function () {
            var x = "";
            $('#ul1 li').click(function (event) {
                $('#txtSearch').val($(this).text() + " . ")
                x = $('#txtSearch').val();
                $('#ul1').hide();
                $('#ul2').show();
                $('#ul3').hide();
            });
            $('#ul2 li').click(function () {
                $('#txtSearch').val(x + " " + $(this).text())
                $('#ul1').hide();
                $('#ul2').hide();
            });
            $('#ul1 li:last-child').click(function (event) {
                $('#txtSearch').val($(this).text() + " . ")
                x = $('#txtSearch').val();
                $('#ul1').hide();
                $('#ul2').hide();
                $('#ul3').show();
            });
            $('#ul2 li').click(function () {
                $('#txtSearch').val(x + " " + $(this).text())
                $('#ul1').hide();
                $('#ul2').hide();
            })
            $('#ul3 li').click(function () {
                $('#txtSearch').val(x + " " + $(this).text())
                $('#ul1').hide();
                $('#ul2').hide();
                $('#ul3').hide();
            })
        });
    </script>
</body>
</html>

我只能显示一个表达式，就像我输入＆＃39; @＆＃39;在文本框中选择字母和特定字母（比如说A）。我在这里得到 Letter.A 的输出，我只能选择一个表达式，

如果我输入＆＃39; +＆＃39;然后我可以选择第二个表达式。我想要像

这样的东西

Letter.A + Word.Apple 或者我可以选择 Letter.A + Letter.B 或 Word.Apple + Word.Ball

Answer 1

您需要在onkeypress事件中处理+：

else if (e.keyCode === 43) {
    $('#ul1').css("display", "inline");
  }

下面的完整代码，我已经修改了文本添加到文本框的方式，因此它不会丢失。

document.getElementById('txtSearch').onkeypress = function(e) {
  if (e.keyCode === 64 && 107) {
    $('#ul1').css("display", "inline");
  } else if (e.keyCode === 43) {
    $('#ul1').css("display", "inline");
  } else {
    return false;
  }
};
$(document).ready(function() {
  var addtext = function(t) {
    $('#txtSearch').val($('#txtSearch').val() + t);
  }
  $('#letters').click(function(event) {
    addtext(" " + $(this).text() + ".");
    $('#ul1').hide();
    $('#ul2').show();
    $('#ul3').hide();
  });

  $('#ul2 li').click(function() {
    addtext($(this).text());
    $('#ul1').hide();
    $('#ul2').hide();
    $('#ul3').hide();
  });
  $('#words').click(function(event) {
    addtext(" " + $(this).text() + ".");
    $('#ul1').hide();
    $('#ul2').hide();
    $('#ul3').show();
  });

  $('#ul3 li').click(function() {
    addtext($(this).text());
    $('#ul1').hide();
    $('#ul2').hide();
    $('#ul3').hide();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" style="width:250px" id="txtSearch" />
<ul id="ul1" style="display:none;">
  <li id="letters">Letter</li>
  <li id="words">Word</li>
</ul>
<ul id="ul2" style="display:none;">
  <li id="letterA">A</li>
  <li id="letterB">B</li>
  <li id="letterC">C</li>
  <li id="letterD">D</li>
  <li id="letterE">E</li>
  <li id="letterF">F</li>
  <li id="letterG">G</li>
  <li id="letterH">H</li>
  <li id="letterI">I</li>
</ul>
<ul id="ul3" style="display:none;">
  <li id="wordA">Apple</li>
  <li id="wordB">Ball</li>
  <li id="wordC">Cat</li>
  <li id="wordD">Dog</li>
  <li id="wordE">Egg</li>
  <li id="wordF">Fish</li>
  <li id="wordG">Gun</li>
  <li id="wordH">Hat</li>
  <li id="wordI">Ice</li>
</ul>

在单个文本框中获取多个表达式

1 个答案: