PHP array and jQuery autocomplete not working on first character

Question

My autocomplete plugin from jQuery is not working first time with one character in the textbox.
If I continue to type more than one character then the autocomplete kicks in...
So I'm expecting result from the first character but is not getting anything..

<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $( "#names" ).keyup(function() {
                autocompleteNames();
            });
        });

        function loadNames(){
            //Gets the name
            var nameSelected = $("#names").val();
            var namesList = "";
            $.ajax({
                url: 'names.php',
                type: "POST",
                async: false,
                data: { sport: nameSelected}
            }).done(function(names){
                namesList = names.split(',');
            });
            //Returns the javascript array of names.
            return namesList;
        }
        function autocompleteNames(){
            var names = loadNames();
            $("#names").autocomplete({
                source: names,
                minLength: 1
            });
        }
    </script>
</head>
<body>
Namn: <input type="text" id="names" name="names" />
</body>
</html>

And here's my names.php file that's very simple

<?php
$sport = $_POST["sport"];
//Defines the name  array.
$names[0] = "Sam";
$names[1] = "Anna";
$names[2] = "Jens";
$names[3] = "Johanna";
$names[4] = "Emma";
$names[5] = "Mikael";
$names[6] = "Mattias";
$names[7] = "Sebastian";
$names[8] = "Johan";
$names[9] = "Mona";
$names[10] = "Lina";
$names[11] = "Linda";
$names[12] = "Ebba";
$names[13] = "Andreas";
$names[14] = "Marcus";
$names[15] = "Markus";
$names[16] = "Anders";
$names[17] = "Maria";
$names[18] = "Sandra";
$names[19] = "Jonatan";
$names[20] = "Jacob";
$names[21] = "Carolina";
$names[22] = "Tom";
$names[23] = "Tim";
$names[24] = "Zlatan";
$names[25] = "Emelie";

//Defines an empty variable that will return the javascript array.
$teams = generateAutocompleteArray($names);

//Returns the teams in the appropriate javascript array format.
echo $teams;

//Function converts PHP array a string where it can be split into an array easily.
function generateAutocompleteArray($namesArray){
    $jsNamesArray = "";

    $teamCount = count($namesArray);
    for($i=0; $i<$teamCount; $i++){
        $jsNamesArray.= $namesArray[$i].',';
    }
    //Removes the remaining comma so you don't get a blank autocomplete option.
    $jsNamesArray = substr($jsNamesArray, 0, -1);

    return $jsNamesArray;
}
?>

I could not see $_POST["sport"] in your php. how do you receive $_POST["sport"] — Indra Kumar S, Feb 01 '15 at 19:28
Sorry I added it to the top of the names.php....but what am I suppose to do with it?? — Grendizer, Feb 01 '15 at 19:32

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

I don't think you should bind your autocomplete constructor to the keyup event of the input text. If so, you are recreating the object every time the user types something. Also, you are returning the namesList and maybe it is still loading from the ajax request. You have to wait for the request to complete in order to have the namesList, remember that javascript is asynchronous.

So basically, you have to construct the autocomplte just once, and look for the autocomplete parameters (source) to specify that your data is loaded via ajax. Take a look at this: jQuery autocomplete with callback ajax json

edited May 23 '17 at 12:20

Community

1
1

answered Feb 01 '15 at 19:37

satchcoder

797
5
11

Thanks for you reply! But I want to be able to search for a name everytime a user inputs a character...if not keyup then what? – Grendizer Feb 01 '15 at 19:45
the autocmplete plugin does it all for you. you dont have to listen the keyups... – satchcoder Feb 01 '15 at 19:58

PHP array and jQuery autocomplete not working on first character

1 Answers1