Having trouble selecting the first element with cursor on Jquery TokenInput?

I'm currently using a Bootstrap (v5.1.3) card that features an autocomplete field powered by jQuery's TokenInput.

Everything seems to be functioning properly, except for the fact that I'm unable to access the first element of the field using my cursor. It only works when navigating with the arrow and enter keys. Strangely, when I remove the input field from the card, it works as expected. I'm perplexed as to why this issue is occurring and how I can resolve it?

<script type="text/javascript">
  $(document).ready(function() {
      $("#autocomplete").tokenInput([
          {id: 7, name: "Ruby"},
          {id: 11, name: "Python"},
          {id: 13, name: "JavaScript"},
          {id: 17, name: "ActionScript"},
          {id: 19, name: "Scheme"},
          {id: 23, name: "Lisp"},
          {id: 29, name: "C#"},
          {id: 31, name: "Fortran"},
          {id: 37, name: "Visual Basic"},
          {id: 41, name: "C"},
          {id: 43, name: "C++"},
          {id: 47, name: "Java"}
      ]);
  });
</script>
/* Example tokeninput style #2: Facebook style */
ul.token-input-list-facebook {
    overflow: hidden; 
    height: auto !important; 
    height: 1%;
    width: 400px;
    border: 1px solid #8496ba;
    cursor: text;
    font-size: 12px;
    font-family: Verdana;
    min-height: 1px;
    z-index: 999;
    margin: 0;
    padding: 0;
    background-color: #fff;
    list-style-type: none;
    clear: left;
}

ul.token-input-list-facebook li input {
    border: 0;
    width: 100px;
    padding: 3px 8px;
    background-color: white;
    margin: 2px 0;
    -webkit-appearance: caret;
}

li.token-input-token-facebook {
    overflow: visible; 
    height: auto !important; 
    height: 15px;
    margin: 3px;
    padding: 1px 3px;
    background-color: #eff2f7;
    color: #000;
    cursor: default;
    border: 1px solid #ccd5e4;
    font-size: 11px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
    white-space: nowrap;
}

li.token-input-token-facebook p {
    display: inline;
    padding: 0;
    margin: 0;
}

li.token-input-token-facebook span {
    color: #a6b3cf;
    margin-left: 5px;
    font-weight: bold;
    cursor: pointer;
}

li.token-input-selected-token-facebook {
    background-color: #5670a6;
    border: 1px solid #3b5998;
    color: #fff;
}

li.token-input-input-token-facebook {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div.token-input-dropdown-facebook {
    position: absolute;
    width: 400px;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: default;
    font-size: 11px;
    font-family: Verdana;
    z-index: 1;
}

div.token-input-dropdown-facebook p {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: #777;
}

div.token-input-dropdown-facebook ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown-facebook ul li {
    background-color: #fff;
    padding: 3px;
    margin: 0;
    list-style-type: none;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li em {
    font-weight: bold;
    font-style: normal;
}

div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
    background-color: #3b5998;
    color: #fff;
}
<html lang="en">
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="static/assets/js/jquery.tokeninput.js"></script>

  <link rel="stylesheet" href="static/assets/styles/token-input-facebook.css" type="text/css" />
  


</head>
<body>
  <div class="card">
    <div class="card-body">
      <input type="text" id="autocomplete" class="form-control" placeholder="Search...">
    </div>
  </div>
</body>
</html>

javascriptjquerycssbootstrap-4

Answer №1

I encountered an issue with the code snippet you provided, however, after making a few tweaks to it, I got it to work flawlessly in a snippet. In my version, I included a configuration object as the second parameter in tokenInput() to ensure that the "facebook" class is appended. Additionally, I adjusted the input width to align better with bootstrap.

Do you think I'm overlooking something?

$(document).ready(function() {
  $("#autocomplete").tokenInput([{
      id: 7,
      name: "Ruby"
    },
    {
      id: 11,
      name: "Python"
    },
    {
      id: 13,
      name: "JavaScript"
    },
    {
      id: 17,
      name: "ActionScript"
    },
    {
      id: 19,
      name: "Scheme"
    },
    {
      id: 23,
      name: "Lisp"
    },
    {
      id: 29,
      name: "C#"
    },
    {
      id: 31,
      name: "Fortran"
    },
    {
      id: 37,
      name: "Visual Basic"
    },
    {
      id: 41,
      name: "C"
    },
    {
      id: 43,
      name: "C++"
    },
    {
      id: 47,
      name: "Java"
    }
  ], {
    theme: "facebook"
  });
});
/* Example tokeninput style #2: Facebook style */
/* CSS styles here */
<html lang="en">
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tokeninput/1.6.0/jquery.tokeninput.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec1dec3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="card-body">
        <input type="text" id="autocomplete" class="form-control" placeholder="Search...">
      </div>
    </div>
  </div>
</body>
</html>

Answer №2

Realized that the z-index for 

div.token-input-dropdown-facebook
should be significantly greater than 1!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring how to locate an item in an array using its id with Underscore

Here is an array of objects showcasing equipment images: var jsonarray = [{ "id": "6", "equipment_img": "http://xxx:9696/XXX/images (1)_410.jpg" }, { "id": "7", "equipment_img": "http://xxx:9696/XXX/5.jpg" }, { "id": "8", "equipmen ...

jqueryunderscore.js

What is the resolution process for importing @angular/core/testing in TypeScript and what is the packaging structure of the Angular core framework?

When using import {Injectable} from '@angular/core';, does the module attribute in package.json point to a file that exports injectable? Also, for the format @angular/core/testing, is there a testing folder within @angular/core that contains anot ...

javascriptangularnpm

Navigating JSON Data in Groovy Using a Loop: A Handy Guide

Just starting out with Groovy and attempting to mock a service in SoapUI. The task at hand involves loading a text file containing JSON data, and then matching that data to a specific node. Here is what I have attempted so far: def inputFile = new File( ...

javascriptjsongroovyscriptingsoapui

Guide on accessing the content inside a <div> element

This is what I currently have: <div id='staff' >Staff</div> My goal is to add an asterisk after the 'Staff' text to show that the associated part is necessary. Is there a way to use CSS3 and polymer-dart to target the &ap ...

css

Move a div element as you scroll down the page

I currently have a div that appears when a user scrolls down a page. When clicked, it sends you back to the top of the page. Right now, it simply fades in and out, but I would like it to slide in from the right side of the page. Below is my existing code: ...

jquerycsshtmljquery-animate

Resolving the issue of multiple instances of React within a single application

I'm currently working on a React module in my local environment. To link the module, I am using npm link. Although the module is being imported successfully, the hooks inside the module are failing with the following error message: Invalid hook call ...

javascriptreactjsnpmwebpackpackage.json

What is the best way to create a four-column layout using only CSS when the widths of the columns will vary?

I am looking to create a four-column layout using only CSS, where the width of the columns will adjust responsively. To better understand my issue, take a look at the code snippet below: .row { width: 100%; display: table; } .col { display: table ...

htmlcss

The challenge of default Vuetify styles within a Nuxt environment

Here is my code snippet: <div class="cd-page__details-wrapper"> <v-text-field label="Outlined" placeholder="Outlined" outlined ></v-text-field> </div> Unfortunately, something unexpecte ...

javascriptvue.jsnuxt.jsvuetify.js

Using Ajax to call a PHP function within a WordPress website

I am looking to trigger a PHP function using AJAX. Below is the code snippet of my form: <form class="woocommerce-form woocommerce-form-login login" method="post"> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-ro ...

javascriptphpajaxwordpress

Output the contents of a nested object

After setting up a variable containing music library data... var library = { tracks: { t01: { id: "t01", name: "Code Monkey", artist: "Jonathan Coulton", album: "Thing a Week Three" }, t02: { id: " ...

javascriptarraysloopsobject

Angularjs scope's parent id

I'm looking to access or manipulate a scope's grandparent without making things overly complicated. Leveraging the controller as syntax, I can reference the parent controller like so: this.applicationCtrl.something with applicationCtrl > paren ...

javascriptangularjs

What is the best way to incorporate these elements into my Bootstrap 5 navbar design?

This is the current layout of my navbar, with the logo in the center. I now want to enhance it by adding a search bar and some icons similar to this example: ideal navbar Here is my current navbar for reference: My current navbar <header> <n ...

htmlcssnavbarbootstrap-5

Finding a solution for the network error encountered during the execution of XMLHttpRequest.send in the specified file path (...distfxcoreservermain.js:200

Having recently delved into Angular, I successfully completed the development of my angular web application. While using ng serve for production, everything ran smoothly. However, after incorporating angular universal and attempting npm run dev:ssr or np ...

javascriptnode.jsangularxmlhttprequestangular9

Styling and scripting with CSS and jQuery in an external JavaScript file

Is it possible to add the jquery library from "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" into an external .js file? And how can a .css file be included in a .js file? ...

javascriptjquerycss

Heroku-specific issue prevents Accordion Collapsible from functioning properly due to CSP restrictions

I'm encountering a strange issue. I've implemented some nested collapsible and simple collapsible sections that work perfectly fine on my localhost, but for some reason they don't seem to be working on Heroku. Any help would be greatly appre ...

jqueryexpressbootstrap-4content-security-policyhelmet.js

Javascript's event.keyCode does not capture the Backspace or Delete keys in Internet Explorer

Looking to detect when the Backspace and Delete keys are pressed using javascript/jQuery, I have the following code: $("textarea[name=txt]").keypress(function(e){ var keycode = e.keyCode ? e.keyCode : e.which; if(keycode == 8){ // backspace ...

javascriptjqueryinternet-explorerkeypress

NodeJS/express: server became unresponsive after running for some time

Initially, my service using express and webpack ran smoothly. However, I started encountering an issue where the server would hang with no message code being received, as shown in the server message screenshot (server message screenshot). This problem kept ...

javascriptnode.jsreactjsexpresswebpack

Is there a way to verify the href attribute and potentially append the complete URL address if necessary?

Is there a way to verify the href attribute and replace it with a full URL if it doesn't contain the full path? I tried using JavaScript for this, but it doesn't seem to work on IE 8. This is my JavaScript code: fullUrl = $(this).filter('[ ...

javascriptjqueryregex

Issues encountered when updating values in MaterialUI's TextField using Formik

Within my React functional component, I utilize Formik for form management and MaterialUI V5.10 for styling. The form includes TextField elements and a Canvas element. I am encountering two issues... Despite setting initial values in Formik, the TextFiel ...

javascriptreactjsmaterial-uiformik

Postman: Iterating through requests with various input data sets to dynamically generate the request body

I am facing a challenge with my login API request that requires 3 parameters (userName, password, and remember) in the request body. Out of these parameters, userName and password are mandatory, while remember is optional. The input data is being pulled fr ...

javascriptjsoncsvpostmanmultiple-input