Question

我试图使用jquery ui进行搜索栏自动完成。当我使用 div id =“inputs”时，自动完成功能正常，但如果我使用输入id =“输入”则无效，我需要使用输入才能搜索工作正常。

(function ($) {
$.fn.googleSuggest = function(opts){
  opts = $.extend({service: 'web', secure: false}, opts);

  var services = {
    web: { client: 'hp', ds: '' },
  }, service = services[opts.service], span = $('<span>');


  opts.source = function(request, response){
    $.ajax({
      url: 'http'+(opts.secure?'s':'')+'://clients1.google.com/complete/search',
      dataType: 'jsonp',
      data: {
        q: request.term,
        nolabels: 't',
        client: service.client,
        ds: service.ds
      },
      success: function(data) {
        response($.map(data[1], function(item){
          return { value: span.html(item[0]).text() };
        }));
      }
    });  
  };

  return this.each(function(){
    $(this).autocomplete(opts);
  });
}
}(jQuery));
$.each("web".split(" "), function(i, v){
  var div = $("<div>").appendTo("#inputs")
    , input = $("<input>").appendTo(div)
   input.googleSuggest({ service: v });
});

<html>
<head>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
 <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>
</head>
<body>
 <div id="inputs"></div> 
</body>
</html>

Answer 1

<input>代码can't have child elements，因此您无法append个节点。

您尝试附加的内容似乎是一个div，其中包含另一个输入，您可以googleSuggest()运行该输入：

var div = $("<div>").appendTo("#inputs")
  , input = $("<input>").appendTo(div)
input.googleSuggest({ service: v });

所以你似乎不需要追加任何东西。相反，只需将googleSuggest放在已经在DOM中的<input>上：

$('#inputs').googleSuggest({ /*...*/ })

Jquery UI appendTo NOT WORKING

1 个答案: