Questions tagged [autocomplete]
Autosuggest is a user interface enhancement available in various applications, offering predictive suggestions for words or phrases as the user begins typing, saving time and effort.
I recently started using this method for auto complete, and after a few hours of research, I finally managed to make it work. However, the behavior of the method seems strange to me. Although I am able to get the list of options for auto complete, it does ...
In my code, I am looking to store only an option's ID in a value For autocomplete functionality, the value's type and the option's type need to be the same My solution was to change the value in onChange, which worked successfully However ...
Recently, I experimented with the Autocomplete feature in Material UI. The focus was on adding an option when entering a new value. You can check out the demo by clicking on this link: https://codesandbox.io/s/material-demo-forked-lgeju?file=/demo.js One t ...
When I click on 'select all', I want the input box to display 'ALL' instead of other items. I attempted to incorporate a condition in the getOptionLabel function, but despite showing 'ALL', it still displays other elements. & ...
I'm attempting to create an autocomplete feature that displays the firstName and lastName of a user on the first line and their id on the second. Here is my current implementation: <Autocomplete freeSolo disableClearable options ...
I have encountered a specific issue. I am working on developing a custom Autocomplete Component for filtering purposes. However, I recently came across the following Warning. MUI: The value provided to Autocomplete is invalid. None of the options matc ...
Currently implementing angularJS with autocomplete-alt. The functionality is working smoothly, but I've encountered an issue when clearing the autocomplete input using an AngularJS function - the suggestion list does not update accordingly. How can I reset ...
Attempting to implement a basic autocomplete feature using jQuery AJAX with Razor MVC 3 and Visual Studio 2012, all of which are new to me. My current code is outlined below: JavaScript: $(document).ready(function () { $("#city").keyup(functi ...
As a Korean, please excuse my lack of proficiency in English. This image displays the autocomplete feature for HTML files in IntelliJ. This particular file was generated by Spring Boot (start.spring.io). How can I achieve the same in VSCode? ...
I am currently working with Material UI Autocomplete and react-hook-form to create a modal, but I am facing an issue where I cannot display a value and change it simultaneously. If I pass the default value to InputValue, it appears on the screen but canno ...
Utilizing the 'AutoComplete' component from Material Ui to display multiple checkboxes and showcase the selected options in a TextField. The issue arises upon form submission where the selected checkbox values appear empty, for example: category: "" It a ...
Hello everyone, I'm looking for assistance on how to integrate this JSON data with the jQuery autocomplete plugin. Being new to jQuery, I am unsure of the steps involved... [{"0":"1","id":"1","1":"Albania","country":"Albania"}, {"0":"2","id":"2","1 ...
I've been utilizing the [vue-multiselect] library for my project. [1]: https://www.npmjs.com/package/vue-multiselect. Within a form, I have multiple multiselect dropdowns. The issue I'm facing is with the browser's autocomplete feature. I&a ...
Currently, I am working on developing an autocomplete feature that involves database search based on user input events (specifically onkeyup) in a <h:inputText />. There are two specific preconditions that need to be met for the application to perfo ...
My search bar utilizes Autocomplete from material ui to suggest options, and it includes a TextField for inputting text. The issue I'm facing is that when typing in the TextField, I notice two clear buttons (x button) - one on the left of the loading ...
I'm trying to add a dimensions box to my form. I created 3 MUI textfields within a formGroup, set the border radius to 0, and adjusted the color properties but it still didn't work. This is what I'm aiming for My goal is to have 3 input fie ...
Seeking assistance with implementing Kendo Angular's auto complete widget using server filtering. Following the service call, the popup displays [object Object] and the count of these matches the results retrieved from the server. Could someone kindly revi ...
My current challenge involves utilizing the material-ui library to create an autocomplete feature where each item is clickable and opens a modal window. The basic structure looks like this: const ModalBtn = () => { ... return ( <> ...
Following these steps: Click on the Autocomplete input field Navigate between options using the arrow keys Select an option by pressing the enter key I am looking to trigger a function by pressing the enter key again, but I am struggling to figure out ho ...
Wouldn't it be great if Autocomplete in material ui could do this: wertarbyte Imagine being able to insert text (string) without the need for a list of elements to select from. This means that the noOptions message shouldn't appear, and instead ...
After successfully implementing md-autocomplete in my Angular4 app, I encountered a problem where the options do not show up when the list is first clicked, unlike in the demo. The options only appear once a selection is made. Here is the HTML code: &l ...
Currently, I am utilizing Material UI Autocomplete to showcase a list of partners. The options are displayed in the format depicted in the image linked here: https://i.stack.imgur.com/3K47G.png The arrangement of the options is as follows: [name] [type] ...
When attempting to make a login form using outlined text fields in Vutify, there is an issue with Chrome autocomplete overlapping the labels. <v-text-field v-model="email" label="e-mail" name="email" outlined prep ...
I'm having trouble implementing autocomplete with an Oriento DB interface. The web server running on NodeJS with the Express framework has the following server code: express.get("/piatti", function(req, res) { var tipo = req.query.tipo; var nome ...
I am facing an issue with the autoComplete feature in my React project. The react-text-mask component looks like this: <MaskedInput {...other} ref={ref => { inputRef(ref ? ref.inputElement : null); return ref; }} mask={[ /\d ...
Is there a way to show the total count of chosen options using the Autocomplete feature from material-ui? If so, how can I achieve this? Simply follow these steps: click on Open menu dropdown, open the Autocomplete, select your desired options, and you w ...
I'm attempting to nest a RadioGroup inside AccordionDetails, and then add the Accordion list as options within an Autocomplete component in its renderOption props. The issue I'm encountering is that when clicking on the label (which is a span element upon ...
I've utilized the controller component from react-hook-form to trigger the material UI autocomplete feature successfully. However, when I include a defaultValue parameter and then click on the submit button, an error message appears indicating validation ...
Check out this sample code: https://jsfiddle.net/JLLMNCHR/09qtwbL6/96/ The following is the HTML code: <div id="app"> <button type="button" v-on:click="displayVal()">Button1</button> <autocomplete v- ...
Currently, I am developing a phone number input field using Material UI Components. The structure of the field is as follows: <Box> <Autocomplete /> <TextField /> </Box> The Autocomplete component (used for country code) has ...
This specific element is crucial for the functionality of the application. <input aria-invalid="false" autocomplete="off" placeholder="Category" type="text" class="MuiOutlinedInput-input MuiInputBase-input ...
Can a tooltip be added to an element inside an input when the element is wider than the container and the mouse cursor hovers over it? I attempted to use a Tooltip around a TextField in the renderInput attribute. While this method works, there seems to b ...
In one of my projects, I am using jQuery UI autocomplete search to look for subjects. However, I have encountered a problem. You can find a replica of the search implementation in this js fiddle. The first search uses a single JSON array object without an ...
I can't seem to figure out why I keep encountering this error when trying to set up autocomplete with ajax source. "Uncaught TypeError: Cannot read property 'length' of undefined" Below is the route I have in express. exports.findAllIrds = function(req ...
I am currently utilizing Material UI Autocomplete for my project. <Autocomplete multiple id="tags-outlined" options={options} getOptionLabel={(option) => option && option.name} value={catArray} onChange={han ...
I am looking to add a 'minimum character length' feature to the autocomplete component in react material-ui. The code snippet below demonstrates what I have so far. constructor(props) { super(props); this.state = { // toggle for ma ...
import * as React from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; export default function MovieComboBox() { const [movieList, setMovieList] = React.useSt ...
I am facing an issue with my autocomplete feature. It is functioning properly on one of my pages, but not on this particular page. Even though the correct number of entries is being retrieved, they all appear to be "blank" or are displayed in black text th ...
How can I filter the options in a Material UI Autocomplete component based on a property of the option value that is not displayed as the label? I want the user to be able to input an item id, like 5141, and have the options filtered to show 'brass pipes'. ...
I am looking to showcase how validation errors are displayed when a user clears their selection. https://i.stack.imgur.com/ULEgs.png For reference, here is the sandbox link: https://codesandbox.io/p/sandbox/formik-autocomplete-yh3sl7?file=%2Fsrc%2FApp.ts ...
Material UI Autocomplete component functions properly, but I am interested in extracting object.id as the value for the onSelect event (rather than object.name). Essentially, I want to display the object.name as the select item label, while retrieving obje ...
Currently, I am working on the select_course.php file which includes AJAX autocomplete. My goal is to pass the array variable obtained from get_course.php <script type="text/javascript"> $(document).ready(function(){ $("#course_no").auto ...
I have a query about displaying results using the MUI Autocomplete component. I am looking to categorize the results into two separate lists placed side by side. Currently, I have a working searchbar with one list of results. However, I aim to segregate t ...
I have a requirement to display the total number of items in each option for the Autocomplete feature. While I am able to show this in expanded items, I am unable to display it when one is selected. Please refer to the image and code provided and suggest ...
I am using autocomplete with multiple selection permission. https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js In the provided example, there are 3 options for cities. How can I manually insert a value in TextField that is automatically selected ...
I'm currently working with a material-ui autocomplete element <Autocomplete id="combo-box-demo" autoHighlight openOnFocus autoComplete options={this.state.products} getOptionLabel={option => option.productName} style={{ width: 300 }} ...
Is it possible to change the icon for the open/close dropdown list without affecting the functionality? I attempted to use endAdornment but lost functionality for both remove and open/close icons. I simply want to replace Material-UI's custom arrow with a ...
Exploring ways to develop a basic autocomplete feature without relying on third-party dependencies has been my recent project. So far, I have managed to populate a results list using an ajax call and complete fields with mouse onclick events for each optio ...
I've implemented the jQuery code below for an autocomplete input field, but I'd like to have a spinner display while waiting for the response from the server. In my code, I'm using search: to show the loading div and open: to hide it. The success function ...
Struggling to configure Material Autocomplete to automatically select the initially loaded option. Despite being new to React, I've been trying out the following code: export default function AsyncPicker({name, formik, initialOptions = []}) { cons ...
I'm almost done with my first jQuery autocomplete script and just need some assistance in understanding how to make the found elements clickable as links. Here is a snippet of my JavaScript code: $(document).ready(function() { var attr = $('#leseulst ...
The autocomplete hints are not displaying any response for me. Here is the jQuery code that I am using: jQuery( ".newtag_new" ).autocomplete({ minLength: 0, source: function( request, response ) { jQuery.ajax({ type: 'GET ...
When attempting to utilize a custom component for the ListboxComponent prop in Autocomplete MUI v5, an error is encountered: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Autocom ...
Recently, I embarked on a project to develop a browser-based editor using monaco and antlr for a unique programming language. Following an excellent guide, I found at , gave me a great start. While Monaco provides basic suggestions with ctrl + space, I am ...
I am a novice and I want the form to be autofilled when I select a vehicle ID from the template. Here are my models. class Fuel(models.Model): vehicle = models.ForeignKey(Vehicle, on_delete=models.CASCADE) previous_km = models.IntegerField(blank=False, nul ...
I am attempting to trigger a function that can detect if the browser has autofilled a field and then add a specific class to it. After finding a thread with a solution that mostly works, mentioned here: Here is how I implemented it: $.fn.allchange = fun ...
I encountered a strange issue while attempting to implement a solution from a Stack Overflow answer into my project. The solution involves using JQuery UI to create a simple autocomplete textbox. Interestingly, when I directly copy the code from the provi ...
Here is a snippet of my jQuery code. In this code, 'year' refers to the form input tag ID, and 'years' is an array variable containing all the year values. I have set this array as the source for autocomplete, which works fine. However, when I try to set t ...
I found my code reference here: http://example.com/code-reference if ($hint=="") { $hint="<a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes-> ...
Here is a set of data for you to explore: const example = [ {character: 'JAMES BOND', affiliation: 'AGENT'}, {character: 'KING ARTHUR', affiliation: 'KNIGHT'}, {character: 'ROBIN HOOD', affiliat ...
Here is a JSON list of search terms: [ "halo", [ "halo reach", "halo anniversary", "halo 4", "halo 3", "halo mega bloks", "halo 2", "halo sleepsack", "halo wars", "halo reach xbox 360", "halo combat evolved" ], ...
I'm encountering an issue with calling a javascript function when the value of a Dojo auto completer changes. Despite trying to call the function through the "onChange" attribute, it doesn't work as expected. Within the javascript function, my ...
After creating an autocomplete search functionality that queries my mysql database, I encountered a slight issue. Here is the code snippet showcasing my implementation: <div class="search-bar"> <div class="ui-widget"> <input id="ski ...
I am currently implementing typeahead.js to create a dynamic search functionality. The goal is to search through a JSON file and display the results on the screen. To achieve this, I have prepared a JSON file that contains all the devices that will be sea ...
After searching for similar questions, I couldn't find any with the same "variables," so here's my dilemma: I have a basic form where I input a name and I want the rest of the form to be filled in automatically (ID). Retrieving data from the database is ...
Is there a way to transform Material UI's Autocomplete component so that instead of displaying suggestions in a dropdown, they appear as a moving placeholder? Specifically, I want the text inside the Autocomplete component to slide in from the left. You c ...
I'm attempting to create a unique autocomplete feature for a text box that specifically provides postal codes. To accomplish this, I have followed the guidelines outlined in the documentation found at https://developers.google.com/places/webservice/autocom ...
I need help adjusting the padding to align the icon to the right side in an AutoComplete Material UI component. The current styling is being overridden by this specific style: .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inp ...
I'm currently working with Material UI v5 beta1 and I've been attempting to customize the Autocomplete component. My goal is to change the Typography color on the options from black to white when an item is selected. However, I'm struggling ...
Once the browser autocompletes my login form, I notice that the password input's value is initially empty. However, when I click on the password field, suddenly the value appears. Additionally, there are several inexplicable events being triggered by the b ...
I am looking to include an <AutoComplete /> field in my form. The options for this field are fetched through a get request, and here is the result displayed in the console. [ { "uid": "c34bb0ed-9f63-4803-8639-a42c7e2a8fb0&q ...
Searching through various exam resources, I have come across autocomplete solutions using jQuery. In my MySQL database, I have a collection of usernames. My objective is to create an autocomplete feature which pulls data from the database by utilizing PHP ...
Our list of document numbers is completely unique, with no duplicates included. I am attempting to implement a feature in Angular Material that automatically selects the unique entry when it is copied and pasted. https://i.stack.imgur.com/70thi.png Curr ...
Currently, I am working with a jQuery autocomplete feature and I am looking to add a space right after the selection is made using the mouse. I have attempted the following code snippet: $('input[id$=item_price_new]').val(price)+ " "; Unfortun ...
I'm currently working on implementing an autocomplete feature using Google Places API in my project with Material UI React, Redux-Form, Revalidate, and MUI-Places-Autocomplete. Although I've successfully integrated the place lookup functionality, I'm facin ...