Question

I’ve made a javascript autocomplete, but i’m having trouble in its CSS styling. What basics things should I include in #keywords??Here’s the JS code:

<script>
$(document).ready(function() {
  $("#keywords").autocomplete({
    source: keywordList,
    minLength: 2,

  });
});
</script>

Answer 1

As you may know, the selector is used to specify what tags you are going to operate on. In this case to convert them into autocomplete fields. The style of the tags has little to do with the javascript code, and more with the CSS and any aditional resouces you may need (such as images). Although it is possible to use javascript to write the styles, it is not done inside of the selector string.

---

CSS

JQuery will add this class to the tags it converts to autocomplete: ui-autocomplete-input. You should be able to find a definition of that class in CSS in the theme you should have got with your JQuery UI. If you are not using that, you can also write one yourslef, that will be like so:

<style type="text/css">
    .ui-autocomplete-input
    {
        /*your style here*/
    }
</style>

I don’t know how you want it to look like, so I can’t figure out what to put in there.

Anyways, you could give a look at w3schools.com CSS Tutorial and find out what CSS to use.

Please not that .ui-autocomplete-input in CSS is a class selector, you could also use any other selector, for example:

.class /*to match a class*/
{
     /*your style here*/
}

#id /*to match an id*/
{
     /*your style here*/
}

body /*to match a tag name*/
{
     /*your style here*/
}

body > table /*to match a direct child*/
{
     /*your style here*/
}

body table /*to match a child (no matter how many levels inside)*/
{
     /*your style here*/
}

These are the same selectors you will use in JQuery, when you pass, for example $("#keywords").

---

If you want to use jquery to change the style of a tag, you can write code like this:

$("#keywords").css('border', '1px solid black');​​​​​

But if the style is not going to change it is better to use CSS.

---

Note: remember to specify the script type: <script type="text/javascript"> /*code*/ </script>