Activate the drop-down division when the search box is in focus with xoxco technology

Currently, I am incorporating Xoxco's tag input plugin which can be found at the following link:

In my customization, I have implemented JQuery's focus() function

<input id="tags_1" class="tag-holder" type="text" class="tags"  /></p>      
    <div id="std" style="display:none;">
        <span id='pdf' onmouseover="" style="cursor: pointer;">PDF</span>
        <p id="reset" onmouseover="" style="cursor: pointer;">Reset Tags</p>
    </div>

This is the JQuery code for my implementation:

$('#tags_1').focus(function(){
        $('#std').css('display','block');
});

However, this functionality does not seem to cooperate when integrated with my version of the plugin. It works fine on its own without the plugin. Can someone spot what might be missing here?

javascriptjqueryhtmlcss

Answer №1

One issue is that it adds a _tag to the element's ID, making the original ID unavailable. To target this new ID, use #tag_1_tag:

Therefore, your code should look like this:

The order of operations is crucial here.

$('#tags_1').tagsInput({width: 'auto'}); //<----Applying tagInput

$('#tags_1_tag').focus(function(){  //<-----This ID now needs to be targeted
    $('#std').css('display','block');
});

See Demo Fiddle

You can also utilize attribute selectors:

$('[id^="tags_1"]').focus(function(){  //<-----This ID now needs to be targeted
    $('#std').css('display','block');
});

Demo with Attribute Selector

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

Troubleshooting a Border Problem in CSS

Just joined this site and I'm new to coding, eager to learn more. I'm trying to make the border of this grey box grey, with the rest being blue. I've searched online but can't find exactly what I need. The grey area is 200px wide and ...

cssborder

Understanding fluid design concept

Check out this example. I've noticed that when resizing the viewport, the font size within the .main class increases while there is no change in the .aside class. Can someone help shed light on this for me? Thank you in advance! ...

cssliquid-layout

The filter() method in Jquery does not function properly when used with a class

Seeking guidance as a beginner web developer. Encountering an issue with the filter() function. When using it with an ID selector like ('#test'), everything works smoothly. However, when attempting to apply it to a class selector like ('.loc ...

jqueryajax

What is the best way to utilize Link navigation in order to navigate away from a blocked route in the latest version of Next.js,

DISCLAIMER: I raised this issue on the Next.js GitHub repository, but it was closed without recognition. The solution provided did not resolve my problem, leading me to seek help here. The Issue at Hand I have created a demo app (accessible here) on Code ...

javascriptreactjsnext.jsnext.js13nextjs-dynamic-routing

Can a custom spellchecking feature be integrated into an HTML textarea?

Question: I am wondering if it is feasible to incorporate a personalized spell checking feature into a Textarea field. Background: Currently, I am utilizing the b-form-textarea component from bootstrap-vue to present a textarea where users can input a li ...

javascripthtmlvue.jsbootstrap-vue

Error encountered while attempting to save process using ajax - 500 Internal Server Error

I am facing an issue with my CodeIgniter code where I encounter a 500 internal server error when trying to save data. I am not sure why this problem is happening and would appreciate any help. Below is the AJAX code in the view: function save() { $(& ...

javascriptphpjqueryajaxcodeigniter

Discover every possible path combination

Looking to flatten an array of 1D arrays and simple elements, reporting all combinations until reaching a leaf "node." For example: // Given input array with single elements or 1D arrays: let input = [1, 2, [3, 4], [5, 6]]; The unfolding process splits pa ...

javascripttypescriptalgorithm

How can I implement a Mouse Over event listener for a FlexTable in GWT 1.7?

What is the best method to attach an event listener or handler to widgets in GWT 1.7? I have looked at similar questions on SO, but they appear to be outdated. How can I add a Hover listener to a FlexTable, disregarding the existing :hover in CSS? ...

javahtmlgwtevent-handling

What is the process of integrating an HTML web component with an HTML file? Can I use innerHTML = foo("myfile.html") to achieve

Using HTML web components allows me to define their code using this method: this.innerHTML = `<h1></h1>`; However, I find it cumbersome as I do not have access to the Emmet Abbreviation feature which slows down my component creation process. ...

javascripthtmlinnerhtmlhtml-components

Bug Found in AngularJS v1.3.15: Text Color Rendering Glitch on Page Load with WebKit

It appears that the text colors (which should be blue) are not displaying correctly until a user hovers over the text or resizes the window. I attempted to resolve this issue by adjusting the transition property so that it triggers on hover/active states ...

cssangularjswebkit

NodeJS assert.AssertionError: How can I eliminate this error?

For my school project, I decided to create a web service using IBM Bluemix. However, I encountered an "assert.AssertionError" when attempting to run the code with "npm start" in the Windows 10 Command Prompt on my localhost. Can someone help me understan ...

javascriptnode.jsexpressnpmibm-cloud

Error: Attempting to access the properties `line_items.amount`, `line_items.currency`, `line_items.name`, `line_items.description`, or `line_items` is not allowed

Hi there, I'm currently working on creating an Amazon-inspired platform and I've encountered an error while trying to integrate Stripe with the project. Can anyone provide some assistance? You can refer to the video tutorial I'm using by fol ...

javascriptnext.jsstripe-payments

Tips for correctly cloning a table row:

Currently, I am engaged with a Django project that involves incorporating a form within a table structure. <table name="mytable" id="table_purchase" role="grid"> <thead> <tr> <th class="text-center" hidden>No</th& ...

javascriptjqueryhtmlajaxdjango

Mobile Drag and Drop with JavaScript

While experimenting with a user interface I created, I utilized jQuery UI's draggable, droppable, and sortable features. However, I observed that the drag and drop functionality does not work in mobile browsers. It seems like events are triggered diff ...

javascriptjqueryandroid

Preventing Shift: How to Only Replace the Chosen Vue Draggable Item Without Affecting Other Grid Items

Let's try an example to demonstrate: https://codesandbox.io/s/j4vn761455?file=/src/App.vue:112-116 Step 1: Drag item 4 to where 5 is. Notice how 4 and 5 switch positions. Step 2: Now, drag item 1 to position 6. Watch as 1 moves to where 6 was, pushi ...

javascriptvue.jsvuedraggable

Access the value of a specific field within an object using ng-options and use it to filter out other

I have created two separate lists. 1) The first list contains the service names. 2) The second list contains the product names assigned to each service name. Each product has a unique ID that matches it with its corresponding service. app.controller( ...

javascriptangularjs

What are the steps for passing HTML tags from the view to the controller in CodeIgniter through AJAX utilizing JSON data type?

When trying to send a value from a textarea with HTML tags and inline CSS codes using AJAX with JSON as the datatype, I encountered an issue where it didn't return the exact HTML tags and styling. $('#add_course_form').submit(function(e) { ...

phpjqueryajaxjsoncodeigniter

Whenever I attempt to populate my modal box with data from my selection, I am greeted with an error message stating "invalid object passed in." What could be causing this issue?

Whenever I click on a customer from my table to display their details in a modal box, I keep getting an error message that says "invalid object passed in." The method client is responsible for populating the data and displaying it through a partial view. T ...

javascriptjqueryasp.net-mvcrazormodal-dialog

Using jQuery to retrieve the initial object in an array following an Ajax request

I need to retrieve the first object returned by an AJAX call before looping through it with the each() function. Here's the current code that successfully loops through the data: $.each(obj.DATA, function(indexInArray, value) { var depts ...

javascriptjqueryajax

Uploading and saving data to an object in FaunaDB using React hook forms

I am currently facing an issue with uploading/saving data to an object in FaunaDB. Specifically, I am trying to upload a string to a jobProfile object: data: { "jobProfile": { "image": "" "coverImage": " ...

javascriptnext.jsreact-hook-form