CODEWITHSUNDEEP
javascriptjqueryjquery-ui
notsure
notsure

Reputation: 11

Jquery UI appendTo NOT WORKING

Im trying to use jquery ui for search bar autocomplete. When I use div id="inputs" autocomplete works fine, but if I use input id="inputs" it's not working and i need to use input in order to search works properly.

(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>

Upvotes: 0

Views: 1087

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21485

<input> tags can't have child elements, so you can't append nodes to them.

It looks like what you're trying to append is a div, which contains another input, which you run googleSuggest() against:

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

So it seems that you don't need to append anything. Instead, just put googleSuggest on the <input> that's already in the DOM:

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

Upvotes: 2

Related Questions