Jquery UI Selectable not working on webflow UI

Design help General
1

I have designed my website using webflow and now trying to add jquery ui selectable plugin, but it dosent seems to be working. What am I suppose to do?

My Jquery UI Code for autocomplete and selectable

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

I wish to add it in a coloumn of my ui design

2

@Priyanka_Gupta your code doesn’t show. Please check it out. You might be better add your public link here so we can observe the problem easier.

3

Hi @pastiwibawa , I added the pre code for the example that was not showing… :smile:

4

@cyberdave Thanks Dave :smiley:
Hi @Priyanka_Gupta do this to your example script

  1. Put all your example script before /BODY tag instead before /HEAD tag

  2. DON’T use this line. Webflow uses v1.11.0 already. Might conflict with another script you may have.

     <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  3. And if you want to use their css for style you need to use complete ref

    <link rel=“stylesheet” href=“http://jqueryui.com/resources/demos/style.css”>

  4. You might already did this right but just in case. Use this line on embed and put it in your column as you wanted to.

    <div class=“ui-widget”>
    <label for=“tags”>Tags: </label>
    <input id=“tags”>
    </div>

It works for me. Hope it helps.

Cheers

1 Like
5

Hi Pastiwibawa
My code started working once I commented all the .js files webflow was linking and added my own script instead. Everything seems to be working fine in my ui design except now it doesn’t scroll smoothly. Will add another jquery plugin for that.
Thanks for the help. :smile: