We're Happy to Announce our PHPUGPH FORUM 2.0

Autocomplete - Typeahead

I wanted to use some autocomplete feature sa mga input text fields.

I saw this online:

https://www.upwork.com/hiring/development/creating-autocomplete-functionality-with-php-and-mysql/

Hindi ako JS expert. And I was able to recreate this above.

The only problem is... when I have two fields na may autocomplete using the script above, the $_POST[''] variable of the second field gets erased, turns into null. As if the variable does not exist.

I can make it work when I disable the autocomplete. But once I add it, nabubura laman ng second field.

In the example code in the tutorial above...

Ito input box nya:

<input type="text" name="city" size="30" class="city" placeholder="Please Enter City or ZIP code">

So let's say meron lang akong ganito:

<input type="text" name="homecity" size="30" class="city" placeholder="Please Enter City or ZIP code">
<input type="text" name="workcity" size="30" class="city" placeholder="Please Enter City or ZIP code">

Patay na. Only $_POST['homecity'] gets a value. Burado yung $_POST['workcity'].

Once I remove the class="city" sa field, gagana na.

So I tried duplicating the JS code naman and have two classes. class="homecity" and class="workcity".

Then ito orig code:

<script>
$(document).ready(function() {
$('input.city').typeahead({
name: 'city',
remote: 'city.php?query=%QUERY'
});
})
</script>

Then ito binago ko:

<script>
$(document).ready(function() {
$('input.homecity').typeahead({
name: 'homecity',
remote: 'city.php?query=%QUERY'
});
$('input.workcity').typeahead({
name: 'workcity',
remote: 'city.php?query=%QUERY'
});
})
</script>

Sablay pa din.

Then I tried:

<script>
$(document).ready(function() {
$('input.homecity').typeahead({
name: 'homecity',
remote: 'city.php?query=%QUERY'
});
})
$(document).ready(function() {
$('input.workcity').typeahead({
name: 'workcity',
remote: 'city.php?query=%QUERY'
});
})
</script>

Sablay pa din. Autocomplete won't work anymore.

And once mapagana ko, sira naman yung POST Vars ko.

Pasensya na, tagal nang hindi nagcocode, bopols sa JS.

And of course btw... inayos ko din yung CSS styles.

Orig code has:

.tt-hint,
.city {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 45px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 400px;
}

Ginawa ko lang na:

.tt-hint,
.homecity,
.workcity  {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 45px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 400px;
}

Comments

  • pwede patingin yung screenshot mo sa chrome debugger (ctrl + shift + I ) under network
    paano mo nasabing
    "$_POST[''] variable of the second field gets erased"

  • Ok, before I try to solve this, let me clarify a few things. Based on your first code.

    1. You're using typeahead to populate the fields homecity and workcity, both of which have the class name city
    2. $_POST[workcity] is empty

    Right?

    Typeahead sends the query in $_GET not $_POST so I assume that part is not the problem. Rather, when you submit the form (now containing homecity and workcity), $_POST[workcity] is empty. Am I correct?

    Or are you sending $_POST back to server via AJAX whenever the value of homecity or workcity changes?

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!