Question

我发现here会覆盖其中一个自动完成事件。但有人可以请我提供如何做同样的例子吗？

Answer 1

appendTo选项确实按预期工作，如果您在DOM处检查，<ul>结果元素将附加到元素。但是，由于jQueryUI生成的绝对定位，列表直接显示在<{1}}下。

也就是说，您可以覆盖内部<input>以将结果直接附加到完全不同的元素，例如：

HTML

_renderItem

的JavaScript

<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>

我还创建了一个demo来证明这一点。请注意，最新的jQuery库没有完全测试jQueryUI，所以我使用的是以前的版本，它允许我选择直接使用jsFiddle选项包含jQueryUI。

Answer 2

<div class="test">Output goes here:<br/></div>

<script>
  $("input#autocomplete").autocomplete({
    source: ["something", "something-else"],
    appendTo: ".text",
    position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
  });
</script>

Answer 3

我需要更多地控制数据的放置位置，所以我就是这样做的：

$("#input").autocomplete({
    minLength: 3,
    source: [
        "ActionScript",
        "AppleScript",
        "Asp"
    ],
    response: function(event, ui) {
        console.log(ui.content);
        // put the content somewhere
    },
    open: function(event, ui) {
        // close the widget
        $(this).autocomplete('close');
    }
});

Answer 4

hle的回答对我来说很棒，并且给你更大的灵活性！这是我的测试代码，由他的答案修改：

$("#autocomplete").autocomplete({
    minLength: 3,
    source: ["something", "something-else"],
    response: function(event, ui) 
    {
        console.log(ui.content);
        // put the content somewhere
    },
    open: function(event, ui) 
    {
        // close the widget
        $(this).autocomplete('close');
    }
});

Answer 5

尽管这个问题很老，但是我有一个很简单的解决方案。没有hack，仅以jQuery方式就没有：

代替自动完成响应功能，只需在成功后在div中添加响应数据

    $(document).ready(function () {
    $("#book-code-search").autocomplete({
      minLength: 2,
      delay: 500,
      source: function (request, response) {
       $.ajax( {
        url: "server side path that returns json data",
        data: { searchText: request.term, param2 : $("#type").val()},
        type: "POST",
        dataType: "json",
        success: function( data ) {
          $("#data-success").html(data.returnedData); //returnedData is json data return from server side response
          /* response($.map(data, function (item) {
               return {
              label: item.FullDesc,
              value: item.FullDesc                      
             }
          })) */
        }
      });
     }
    });
   });

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='data-success' style='color: green;'></div>
<input type='text' placeholder='Enter Book Code' id='book-code-search' />
<input type='hidden' id='type' value='book'>

如何将jquery自动完成结果返回到单独的div？

5 个答案:

HTML

的JavaScript