jquery / jquery/jquery-ui

the select is not working in mobile

Open
#2,212 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Comp: Autocomplete Needs info
Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Description

$(document).on('input', '#location', function(e) {
        $.ajax({
            url: '<?php echo $sm['config']['site_url']; ?>worldcities.json',
            dataType: 'json',  // Corrected dataType
            success: function (citiesData) {

            // Extract city names from the data
            var cityNames = [];
            var cityDataMap = {}; // Map to store city data by name

            citiesData.forEach(city => {
                const cityName = city.city_ascii.toLowerCase();
                cityNames.push(cityName);
                cityDataMap[cityName] = {
                    latitude: city.lat,
                    longitude: city.lng,
                    country: city.country,
                    cityName: city.city
                };
            });

            // Initialize the autocomplete functionality on the input field
            $('#location').autocomplete({
                source: function (request, response) {
                    // Filter the cities based on user input
                    const term = request.term.toLowerCase();
                    const filteredCities = cityNames.filter(city => city.includes(term));
                    response(filteredCities);
                },
                minLength: 1,
                select: function (event, ui) {
                    
                    console.log('click event triggered =>', ui, event);

                    // Get the selected city
                    // const selectedCityName = $('#loc').val();                    
                    const selectedCityName = ui.item.value;
                    console.log('selectedCityName =>', selectedCityName);

                    // Find the city in the map
                    const selectedCityData = cityDataMap[selectedCityName];
                    console.log(selectedCityData);

                    if (selectedCityData) {
                        var lat = selectedCityData.latitude;
                        var lng = selectedCityData.longitude;
                        var city = selectedCityData.cityName;
                        var country = selectedCityData.country;
                        message = userId + ',' + lat + ',' + lng + ',' + city + ',' + country;

                        $.ajax({
                            url: request_source() + '/api.php',
                            data: {
                                action: "updateLocation",
                                query: message
                            },
                            type: "get",
                            dataType: "JSON",
                            success: function (response) {
                                // Handle success response as needed
                            },
                            error: function (error) {
                                console.error('Error updating location:', error);
                            }
                        });
                    }

                    // Update the input fields with the selected city's information
                    $('#locality').val(selectedCityData.cityName);
                    $('#lat').val(selectedCityData.latitude);
                    $('#lng').val(selectedCityData.longitude);
                    $('#country').val(selectedCityData.country);
                }
            });
        },
        error: function (error) {
            console.error('Error loading city information:', error);
        }
        });  
    })

this is the code its working fine in desktop but not in mobile when i click with mouse it does not work but when i use arrow to slect and press enter then it works but not in select please help me out with this

EDIT by @mgol: code formatting fixed

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided document handler for #location and reproduce the jQuery UI autocomplete behavior on a mobile device, comparing tap selection with keyboard selection. Trace why tapping a suggestion does not invoke the select path; done when tapping a city updates #locality, #lat, #lng, and #country and performs the location update just as Enter does.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.