Question

我正在开发一个网站，该网站使用JQuery-3.3.1（用于通用脚本）和Jquery-ui-1.12.1在搜索框中使用自动完成功能。我在其他html文件中以这种方式使用了它，但是它可以正常工作，但是在这种情况下，它不会显示自动完成的建议。

我在控制台上没有收到任何错误，但是警告：Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/，我尝试了使用jquery.noConflict（），正如许多建议一样，但是这样做却出错了。尤其是这一个功能不起作用（我将console.log放入其中，它没有出现，而在其他html中却起作用）：

$.extend( $.ui.autocomplete.prototype, {

        _renderItem: function( ul, item ) {
          var term = this.element.val(),
          regex = new RegExp( '(' + term + ')', 'gi' );
            html = item.label.replace( regex , "<b>$&</b>" );


          return $( '<br><li></li>' )
            .data( "item.autocomplete", item )
            .append( $('<a class="search_item"></a>').html(html) )
            .appendTo( ul );
        }
      });

整个脚本：

<script type="text/javascript">

  var files = ["discotecas.xml", "playas.xml", "hoteles.xml", "restaurantes.xml"];
  var mergedXml = undefined;
  $.each(files, function(index, value) {
    $.ajax({
      url: value,
      cache: true,
      async: false,
      dataType: 'text',
      success: function(data) {
        var xmlDocument = $.parseXML(data);

        if (typeof mergedXml === 'undefined') {
          // Init XML collection
          mergedXml = xmlDocument;
        } else {
          // Add new children to XML collection
          var node;
          while (xmlDocument.documentElement.hasChildNodes()) {
            node = xmlDocument.documentElement.childNodes[0];
            mergedXml.documentElement.appendChild(node);
          }
        }

        if (index === files.length - 1) {
          console.log('Total nodes in root: ' + mergedXml.documentElement.childNodes.length);
        }
      }
    });
  });


      // Highlight the selected text
      $.extend( $.ui.autocomplete.prototype, {

        _renderItem: function( ul, item ) {
          var term = this.element.val(),
          regex = new RegExp( '(' + term + ')', 'gi' );
            html = item.label.replace( regex , "<b>$&</b>" );


          return $( '<br><li></li>' )
            .data( "item.autocomplete", item )
            .append( $('<a class="search_item"></a>').html(html) )
            .appendTo( ul );
        }
      });
  // Finds all the elements named "item" then return the specific elements
      var data = $( "item", mergedXml ).map(function() {
        return{
          value: $( "nom", this ).text(),
          cat: $(this).attr('categoria')
        }; 
      }).get();

      $( "#search-keyword" ).autocomplete({
        source: data,
        minLength: 1,
        select: function( event, ui ) {
          if(ui.item.cat=='2'){
            busqueda(ui.item.value, "discotecas");
          } else if (ui.item.cat=='7'){
            busqueda(ui.item.value, "playas");
          } else if (ui.item.cat=='3'){
            busqueda(ui.item.value, "restaurantes");
          } else if (ui.item.cat=='5'){
            busqueda(ui.item.value, "hoteles");
          }

        }
      });



  function busqueda(nombre, cat) {
    console.log("claiskakdsd");
        //var nombre = $(event.currentTarget).attr('id');
        window.location='item.html?cat='+cat+'&item='+nombre;
      };
</script>

head标签：

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">



  <!-- Bootstrap core, CSS y JQuery  -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>




  <!-- Font Awesome (search icon, etc.) -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet"> 

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>





  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>

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

我尝试更改head标签中的顺序，但是由于未正确加载Jquery而导致错误。

jquery-3.3.1和jquery-ui 1.12.1之间可能存在冲突

0 个答案: