Question

我正在尝试使用jquery向我的搜索栏添加一个autosuggest函数。但是我的尝试没有成功。我已经按照教程，但仍然没有得到它。

hide（）。show（2000）适用于我的搜索栏，但不适用于其余部分。我错过了什么？

编辑：我一直在寻找解决方案但仍然没有运气。我用新的更改编辑了我的代码。我在https://goodies.pixabay.com/jquery/auto-complete/demo.html在线找到了该功能，并且可以在他们的网站上使用。

EDIT2：我已经设法让它作为一个独立的网站工作。是否有可能在我的真实网站上阻止某些内容？如果是这样，我该如何覆盖该块？

$(function(){
$('#search').autoComplete({
    minChars: 2,
    source: function(term, suggest){
        term = term.toLowerCase();
        var choices = ['ActionScript', 'AppleScript', 'Asp', ...];
        var matches = [];
        for (i=0; i<choices.length; i++)
            if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
        suggest(matches);
    }
});
});

我的HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Testsite</title>

  <script>"jQuery-autoComplete-master/jquery.auto-complete.min.js"</script>
  <script>"jQuery-autoComplete-master/jquery.auto-complete.js"</script>
  <script>"jQuery-autoComplete-master/jquery.auto-complete.css"</script>

</head>
<body>
    <div>
            <h1>Search field</h1>
    <input id="search" style="width: 500px; height: 50px;font-size:18pt;" placeholder="ActionScript or AppleScript"><br>
    <div id="results"></div>
    <p></p>


    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        //function for autocomplete
    </script>
</div>

Answer 1

我从两个jQuery导入中推断出，您正在从jQuery UI函数中寻找autocomplete()，而不是jQuery。

如果是这种情况，你只需要添加他们的JS，最好是他们的CSS。否则，您需要添加要使用的autocomplete()函数的代码！

您的代码，编辑包含：

＆＃13;

$(function() {
  var availableTutorials = [
    "ActionScript",
    "Bootstrap",
    "C",
    "C++",
  ];

  $('#search').hide(0).show(2000);
  $("#search").autocomplete({
    source: availableTutorials
  });
});

＆＃13;

<div>
  <h1>Sök efter en bok</h1>
  <input id="search" style="width: 500px; height: 50px;font-size:18pt;" placeholder="Titel"><br>
  <button id="button" type="button">Sök bok</button>
  <div id="results"></div>
  <p></p>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <!--<script src="js/seekBook.js"></script>-->
</div>

＆＃13;

Ps：下次请用英语提供所有内容并且没有无法访问的代码（例如：seekBook.js）。你的问题和答案应该适用于每个人，不仅仅适用于你的情况;）

如何将autosuggest添加到我的搜索栏？

1 个答案: