Interactive JQuery autocomplete feature for the div element

Hey there, I have a question about using jquery textcomplete.

It seems like a simple task, but I'm not sure how to accomplish it.

I've created a DEMO without jquery as reference.

My question is this: How can I make the .textBox div automatically appear when I type an open parenthesis ( in the textarea?

If anyone knows how to achieve this, please share your expertise!

<div class="container">
    <div class="textarea_wrap">
        <textarea id="textarea" class="text"></textarea>
        <div class="tagBox"></div>
    </div>
</div>

CSS

 .container{
        width:300px;
        height:300px;
        margin:0px auto;
        margin-top:30px;
    }
    .textarea_wrap{
        width:100%;
        box-sizing:border-box;
        position:relative;
    }
    .text{
        width:100%;
        height:100px;
        box-sizing:border-box;
        outline:none;
        border:1px solid #999999;
    }
    .tagBox{
        width:300px;
        height:100px;
        background-color:red;
        position:absolute;
        top:100px;
        display:none;
    }

Answer №1

Check out a Live Example demonstrating the use of regex over multiple conditions:

JavaScript Code :

 $(function(){
    $('#textarea').keyup(function(){
        if($(this).val().match(/([(]$)/g)){
            $('.tagBox').show();
        }else{
            $('.tagBox').hide();    
        }
    });
})

Answer №2

You have the option to implement something along these lines.

REVISED

$(document).ready(function(){$('#textarea').keyup(function(){

  if(($('#textarea').val() =="(" || $('#textarea').val().indexOf("(")>0) && $('#textarea').val().lastIndexOf("(") == $('#textarea').val().length-1 ){
      $('.tagBox').show();
  }else{
        $('.tagBox').hide();
  }
});
});
.container{
    width:300px;
    height:300px;
    margin:0px auto;
    margin-top:30px;
}
.textarea_wrap{
    width:100%;
    box-sizing:border-box;
    position:relative;
}
.text{
    width:100%;
    height:100px;
    box-sizing:border-box;
    outline:none;
    border:1px solid #999999;
}
.tagBox{
    width:300px;
    height:100px;
    background-color:red;
    position:absolute;
    top:100px;
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="textarea_wrap">
        <textarea id="textarea" class="text"></textarea>
        <div class="tagBox"></div>
    </div>
</div>

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

Determine a comparative measurement using specific numerical values

I am currently in the process of creating a webpage and I want to ensure that it is responsive by adjusting certain values based on the width of the viewport. Specifically, I have a DIV element that I want to split into 2 columns. For smaller screens (min ...

What is the best way to adjust the vertical distance between a Material UI FormLabel and Slider element?

I am currently developing a map that includes an image overlay with adjustable opacity. Below is the code for this component: import React from 'react' import PropTypes from 'prop-types' import { MapWithGroundOverlay } from './Map ...

Issue with JavaScript focus not functioning properly

Why is the Javascript focus not working in the following code snippet? HTML <div class="col-md-6" style="border:none; margin-top:2px; padding-right:5px"> <input type="text" id="edtunt" ng-model="Unit" class="form-control" placeholder="Edit ...

Having trouble aligning items within columns using Bootstrap 4?

Even after researching and attempting solutions from previous questions, I still have not been able to achieve the desired outcome. What is the best way to align items inside columns? How can I adjust image size to perfectly fit the column width? <sec ...

Exploring the power of jQuery autocomplete paired with getJSON

I am trying to implement the jquery autocomplete plugin in combination with the jquery GetJson function on my client page. Here is what I have so far: <script> $(document).ready(function () { var test; $.getJSON ...

Ways to prevent an element from being affected by a CSS Bootstrap class

Is there a way to exclude the container class from affecting the jumbotron class in Bootstrap 4? In my PHP project using the MVC pattern, I have a header included on every page that ends with <main class="container">. However, on the home page, I wa ...

Utilizing jQuery, you can create a function that triggers when an element loses focus or is clicked, showing the next hidden row in a

Wow, I've learned so much about jQuery from you all. This will be my final question, thank you for sharing your expertise! In a nutshell, I'm working on enhancing an ancient ASP.NET site with a massive database-generated front end. Rather than r ...

Angular Integration with Accordion Component

I have successfully implemented an accordion code on my webpage, but it seems to be malfunctioning when I incorporate Angular into the mix. Do I need to convert this code into Angular format? If so, how can I achieve that? Here is the current code: $(doc ...

Navigate through PNG image - proceed only if the clicked area is transparent

Imagine having an image that looks like this: https://i.sstatic.net/Ab6aW.jpg I am looking to make it so that when I click on the transparent areas of the image, the click should pass through to the element below. However, if I click on a non-transparent ...

Issue with AngularJS: Component controller fails to load upon routing using ngRoute

As a newcomer to AngularJS, I am struggling with the following code snippet: This is the component defined in the JavaScript file provided: angular.module('EasyDocsUBBApp') .component('loginTag', { templateUrl: 'login ...

Tips for setting up a due date alert system

As a novice, I'm attempting to develop a function that can switch between texts based on a set due date. The text displayed will change to "Expired" once the due date is reached, and it will remain as "Active" if the date hasn't been reached yet. ...

Vue.js Dynamic Gallery

Greetings to everyone attending, I'm currently working on a portfolio page and I am looking to resize blocks dynamically in vue.js based on window size.View image description here The tile displayed in the image should always maintain a square shape, ...

Managing properties of classes within callbacks using TypeScript

I am currently working on the following task: class User { name: string; userService: UserService; //service responsible for fetching data from server successCallback(response: any) { this.name = string; } setUser() { ...

Achieving vertical centering in Bootstrap using the "table-cell" method

I'm trying to center a div both vertically and horizontally using the "table-cell" method without specifying a specific height. However, it's not working as expected. Why isn't this method working for me? Here is the code I am using: < ...

Tips for concealing a dynamic table element in Angular 9

I have dynamically generated columns and rows in a table. Here is my HTML for the table component: <table id="tabella" class="table table-striped table-hover"> <thead class="thead-dark"> <tr> <th *ngFor="let header of _ob ...

Issue with jQuery function not recognizing escaped double quotes in PHP script

Greetings! I am currently utilizing a custom control with PHP code. $parentLinkCombo = '<select name="ParentComboLink" onchange="changeChildCombo(\"LICENCE\");" id="ParentComboLink" >'; In order to handle the onchange event, I ...

Updating a Mongoose document

I need help with a Node.js and mongoose Module project. I want to find a way to count the number of documents a user has and if they have more than 0 documents, I want to edit their existing document by adding the input text to it. Here is what I have so f ...

Is it Possible to Modify CSS Dynamically within an Angular Directive?

I am currently developing a directive for an input field of type text. My goal is to have the width of this field expand dynamically if the text exceeds the size of the input field. Below is the code snippet for my directive: .directive('dynamicInput ...

Is your jQuery search scope correctly restricted?

Upon coming across this code snippet, I can't help but wonder if it's merely limiting the scope or selecting both elements simultaneously. container = jQuery("#test", parent.document); jQuery("param[name=scale]", another.object) Would anyone b ...

Fixing the CSS 404 error caused by using variables in Flask routes: A step-by-step guide

I have created a basic web application to showcase book reviews. Upon a successful search, users are provided with links to book titles - when a link is clicked, the goal is to pass the ISBN of the selected book to the url_for method and then present the c ...