"Using the selected option from a dropdown list to pass to a PHP file for autocomplete functionality

Although there is no error in the code, I am facing an issue where, after selecting an option from the brands dropdown, when I type in the product field, it passes "%" instead of the brand id (1, 2, or 3). Is there a way to modify the code so that it passes the selected brand id value to the PHP file?

Here is the code snippet:

$().ready(function(){
    $("#product").autocomplete("ajax/php/product_search.php?brands=" + $('#brands').val() +"&",
        {
            width: 260,
            matchContains: true,
            selectFirst: false,
            formatItem: function(data, i, n, value) {   
                return  value.split("|")[0];
            } 
        }
    );           
});

This is the HTML select list for brands:

<select id="brands" name="brands">
    <option value="%">-- Select --</option>
    <option value="1"> JVC - PLAYER SET </option>
    <option value="2"> CLARION - PLAYER SET </option>
    <option value="3"> DLS </option>
</select>

Answer №1

When the page is loaded, you are creating the URL. In order to make the URL dynamic, you need to implement a function that executes the AJAX call when the request for completion is made.

$("#product").autocomplete({
        source: function(request, response) {
           $.getJSON("ajax/php/product_search.php",
                      { brands: $('#brands').val(),
                        term: request.term }, response);
        },
        width: 260,
        matchContains: true,
        selectFirst: false,
        formatItem: function(data, i, n, value) {   
            return  value.split("|")[0];
        } 
    }
);

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

Why does JavaScript interpret the input [ 'foo' ] as accessing a property rather than declaring an array?

I find this particular dilemma on the Mocha Github issue tracker quite fascinating. https://github.com/mochajs/mocha/issues/3180 This snippet of code is functioning as intended: describe('before/after with data-driven tests', () => { befo ...

`On mouseup event, changing specific text`

I've been working on a real-time HTML highlighter that surrounds selected text with span elements containing a background property. Check out the fiddle here: https://jsfiddle.net/4hd2vrex/ The issue arises when users make multiple selections, leadi ...

Comparing Node.js and Node on Ubuntu 12.04

After following the instructions on this website, I successfully installed nodejs on my ubuntu system. However, when I type node --version in the terminal, I get an error message saying: -bash: /usr/sbin/node: No such file or directory Oddly enough, ...

Load media upon the click of an image

I'm currently in the process of designing a team page for our website. Each team member's photo is displayed in a grid layout, with two boxes positioned below containing various content. Box 1: This box consists of basic text information. Box 2: ...

JSF datatable enhanced with AJAX functionality (request scoped, backing component)

I am currently working on creating a datatable component as a Backing Component. The pagination (<h:commandLink> outside of <h:dataTable>) and sorting (<h:commandLink> in <f:facet name="header">) are functioning properly. Now, I wan ...

Show only the results that have identifiers matching the parameter in the URL

My goal is to filter objects based on a URL parameter gatewayId and display only those whose id matches the parameter. import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector ...

Enhancing react-confirm-alert: Steps to incorporate your personalized CSS for customizing default settings

I'm currently utilizing a confirmation popup feature provided by react-confirm-alert: popup = _id => { confirmAlert({ title: "Delete user", message: "Are you sure?", buttons: [ { label: ...

Which is better for creating contour graphs: JavaScript or PHP?

I need to create a scientific graph for a web application that displays temperature data based on time and depth coordinates. You can view an example here : I have time and depth coordinates, and I want to represent temperature using color in the graph, ...

Using the Twit package on the client side: a step-by-step guide

I have been utilizing the Twit package for searching tweets. After executing the js file in the console, I am able to see the tweets but when trying to use them on my webpage, an error 'Uncaught ReferenceError: require is not defined' pops up. Th ...

Error: Unable to access property 'addEventListener' of null. This issue appears to be related to a Chrome extension

It's been frustrating dealing with this persistent error. I'm in the process of creating my very first chrome extension and for some reason, I just can't seem to pinpoint what's wrong with this particular code snippet: let beginButton = ...

Having trouble exporting data from Excel using react-data-export

I've been attempting to create an excel export feature, but for some unknown reason, it's not functioning properly. I'm utilizing react-data-export and followed a small test example from this GitHub link, yet the export is not working as exp ...

The policy of the Authorization Server mandates the use of PKCE for this particular request

I'm currently utilizing the authentication service provided by Hazelbase through next-auth. However, during deployment, an error message pops up stating Authorization Server policy requires PKCE to be used for this request. Please take note that Haze ...

Theme.breakpoints.down not being acknowledged by MUI breakpoints

The Challenge: Implement a hamburger menu to replace the navMenu on tablet and smaller screens After successfully compiling in VS code terminal, encountering an error in the browser: Error Message: TypeError: Cannot read properties of undefined (reading ...

Tips for displaying autocomplete suggestions as clickable links?

I am new to using Ajax and trying to figure out how to display autocomplete results as clickable links. I have managed to list the related results, but I am struggling to add the links. I believe the links need to be added within the script as an HTML tag. ...

AngularJS: The image loader will display on the initial div

I am trying to implement a loader that will hide after a certain amount of time when the user clicks on a profile. I have used a timeout function to achieve this behavior. However, the loader is appearing on the left side instead of within the respective ...

Employing a combination of Mysql and Ajax to dynamically fill out a form based on the values entered

I am facing a challenge in populating a fairly extensive form with around 40 fields with data from a MySQL database. Generating the JSON array from the query is not an issue for me. echo json_encode($row); The objective I aim to accomplish seems to be u ...

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

Implementing a 'Load More' button for a list in Vue.js

I am currently working on adding a load more button to my code. While I could achieve this using JavaScript, I am facing difficulties implementing it in Vue.js. Here is the Vue code I have been working with. I attempted to target the element with the compa ...

What methods can I use to differentiate between requests initiated by RenderAction and those sent through AJAX?

When working with ASP.NET MVC, I often use the helpful Request.IsAjaxRequest method to check if a request is initiated via AJAX. However, I have noticed that the RenderAction method also triggers the controller/action call via AJAX. My goal is to have cal ...

Using NodeJS with Jade to handle a dynamic number of blocks

As I dive into NodeJS development, a challenge has presented itself... In my project, there is a main template called layout.jade that sets up the top navigation bar using Bootstrap on every page. This specific application focuses on music, where each art ...