Javascript jQueryUI自动完成下拉列表缺少格式_Javascript_Jquery Ui_Jquery Ui Autocomplete

Javascript jQueryUI自动完成下拉列表缺少格式

javascript jquery-ui

Javascript jQueryUI自动完成下拉列表缺少格式,javascript,jquery-ui,jquery-ui-autocomplete,Javascript,Jquery Ui,Jquery Ui Autocomplete,我试图让jQueryUI自动完成在本地测试页面中运行在他们的演示页面上看起来不错：但是，当我在本地运行它时，使用与删除远程调用完全相同的演示代码，它工作正常，只是下拉框不显示，只是一个丑陋的列表，带有丑陋的默认黑色li项目符号：因此，页面上有一些代码之外的内容，将ul格式化为更干净的下拉菜单。我看不出来。我可能会在几分钟内自己设计它，但我宁愿让它正常工作这是他们的演示代码，改为在本地针对阵列运行： <!doctype html> <html lang="en">

我试图让jQueryUI自动完成在本地测试页面中运行

在他们的演示页面上看起来不错：

但是，当我在本地运行它时，使用与删除远程调用完全相同的演示代码，它工作正常，只是下拉框不显示，只是一个丑陋的列表，带有丑陋的默认黑色li项目符号：

因此，页面上有一些代码之外的内容，将ul格式化为更干净的下拉菜单。我看不出来。我可能会在几分钟内自己设计它，但我宁愿让它正常工作

这是他们的演示代码，改为在本地针对阵列运行：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <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() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: ["abc","def"],
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

我无法复制它。演示代码似乎在工作。。您在控制台中有任何错误吗

$function{ 函数日志消息{ $.text message.prependTo日志； $log.ScrollTop0； } $birds。自动完成{ 资料来源：[abc，def]，最小长度：2，选择：功能事件，用户界面{ 所选日志：+ui.item.value+aka+ui.item.id； } }; } ; .ui自动完成加载{ 背景：白色urlhttps://jqueryui.com/images/ui-anim_basic_16x16.gif 右中无重复； } 鸟：结果:

这不是源代码中的问题，但当您忘记在标题中添加jquery样式表时，也会发生这种情况：

<link rel="stylesheet" ref="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

这可能会对其他人有所帮助。

是的，问题是我使用了一个协议相关链接：href=//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css，该链接显然在本地文件系统中失败。。。谢谢你抽出时间。