0

我想要实现的是，当我点击任何这些结果时，我希望输入字段的值更改为我点击的内容。但是.item-search-result似乎不可点击？我编写了以下代码进行测试，但 console 的控制台屏幕截图中没有显示任何内容，并且整个结果列表仍然存在（该closeResult()功能假设关闭它）。

$('.item-search-results').on('click', () => {
    console.log('hi!');
    closeResult();
  })

如何正确更新输入字段的值？

我所有的 webSocket js：

$(function () {
  let activeInput;

  let webSocket = new WebSocket("ws://localhost:8000/autocomplete");
  webSocket.onopen = (msgEvent) => {
    console.log('connected to WebSocket!');
  };

  webSocket.onmessage = (msgEvent) => {
    /* results shows {"results":{"results":[{..}]}}.
    results.results shows {results:[{..}]}
    results.results.results shows [{...}], which is an array */
    let results = JSON.parse(msgEvent.data);
        resultsArr = results.results.results;
    console.log(resultsArr);
    appendResults();
  };

  webSocket.onclose = (msgEvent) => {
    console.log('disconnected');
  };

  webSocket.onerror = (msgEvent) => {
    console.log('there\'s an error', error);
  };

  /**
  *  Render results to UI
  */
  const appendResults = () => {
    //create <div class="item-search-results"></div>
    let itemSearchResults = $('<div></div>').attr('class', 'item-search-results');
    //for each result that received, create a div for it for give it a unique id
    $.each(resultsArr, (index, value) => {
      let resultDivs = $('<div>' + value['name'] + '</div>').attr('id', 'item-search-results-' + index);
      //append these divs to <div class="item-search-results"></div>
      resultDivs.appendTo(itemSearchResults);
    });
    //append the <div class="item-search-results"></div> to its closest <td class="item-search-container"></td>
    itemSearchResults.appendTo($(activeInput).closest('.item-search-container'));
  }

  /**
  *  Close the autocomplete lists
  */
  const closeResult = () => {
    $('.item-search-results').remove();
  };

  /**
  *  Change input field's value
  */
  $('.item-search-results').on('click', () => {
    console.log('hi!');
    closeResult();
  })

    // $(document).on('click', () => {
    //   closeResult();
    // });

  /**
  *  Request data
  */
  $('.add-items-table').on('input', '.item-input', (e) => {
    activeInput = e.target;
    let value = e.target.value;
    webSocket.send(value);
    //console.log(value);
  });

})

原始 HTML：

<td class="item-search-container">
    <input class="item-input" id="item-input-0" type="search" name="item" value="">
</td>
4

2 回答 2

1

您可以使用 jquerys .val() 更改输入的值

$(document).ready(function() {

    $(".item-search-results").click(function(){

        var newtext = //new value

        $('input.item-input').val(newtext);

    });
});

编辑：

$(document).on("click",".item-search-results",function() {
     var newtext = //new value
     $('input.item-input').val(newtext);
});
于 2018-07-10T20:23:33.507 回答
0

终于想通了。这是我所做的：on click在循环中添加，将文本存储到变量中，然后将其传递给updateInputVal函数

$.each(resultsArr, (index, value) => {
      let resultDiv = $('<div>' + value['name'] + '</div>').attr('id', 'item-search-results-' + index);
      //add click listener to update input field's value
      resultDiv.on('click', () => {
        //set the value and pass it to the function
        let newText = resultDiv[0].innerText;
        updateInputVal(newText);
      });
      //append these divs to <div class="item-search-results"></div>
      resultDiv.appendTo(itemSearchResults);
    });

这是updateInputVal功能

const updateInputVal = (newText) => {
    $(activeInput)[0].value = newText;
    closeResult();
};
于 2018-07-10T21:47:57.267 回答