Autocomplete does not go to the specified page

Asked

Viewed 61 times

0

I am using jQuery to create a search field with "autocomplete" that is working perfectly. However, I am unable to direct to the link, when the user selects.

My code is like this:

<head>

<link rel="stylesheet" href="libraries/jquery-ui.css">
<script type="text/javascript" src="libraries/jquery.js"></script>    

</head>

<div id="pesquisa" style="float: right; margin-top: 45px; margin-right: 10px;">  
   <form action="index.php?id=<?php echo $linha["id"]; ?>&tp=total" method="get" name="autocomplete" target="_self">
      <input id="autocomplete" title="Digite algo">&nbsp;&nbsp;&nbsp;<button id="button-icon">.</button>
   </form>
</div><!--pesquisa-->

<script src="libraries/jquery.js"></script>
<script src="libraries/jquery-ui.js"></script>
<script>
<?php
    $sql = "SELECT 
    pags.title, 
    pags.keywords, 
    pags.tema
    FROM pags
    ORDER BY pags.id";

    $resultado = $PDO->query( $sql );
    $rows = $resultado->fetchAll(PDO::FETCH_ASSOC);
?>

    var availableTags = [

<?php
    foreach ($rows as $key => $linha) {

    echo '"' . $linha['title'] .' | ' . $linha['keywords'] . '",';

    }       
?>
    ""
    ];
    $( "#autocomplete" ).autocomplete({
    source: availableTags
    });

    $( "#button" ).button();
    $( "#button-icon" ).button({
    icon: "ui-icon-gear",
    showLabel: false
    });

</script>
jquery jquery-ui self-cmplete

  • Where are the links and how would this redirection be done? The question is very vague.

  • The link is in the form action

  • Ok, but that’s when you click the button next to the field or when the user clicks on a list option?

  • When you click the button. But I can’t do either...

1 answer

2

You can submit the form using the event select (see documentation). In the event function search the form using .closest("form") and submit with .submit():

$("#autocomplete").autocomplete({
   source: availableTags,
   select: function(){
      $(this).closest("form").submit();
   }
});

In the case of the button, simply add the attribute required in the field the form will be submitted of value only in the field:

<input required id="autocomplete" title="Digite algo">
       ↑↑↑↑↑↑↑↑

  • Thanks for the reply, but it’s not working yet. Neither the record selection, nor the button. The link is composed of the page name (index.php) of the query variable (ID field that will only be obtained from the QUERY execution) and a constant (&tp=total), but none of this information appears in the URL after the button is called or the input is updated...

  • Change the method get for post, but in PHP you use $_GET

  • It hasn’t worked yet. Although the script is working now, it’s not going to the right page. Does not bring any value in the variable $_POST["autocomplete"]

  • You need to put a name, in the field to catch with POST: name="autocomplete"

Browser other questions tagged jquery jquery-ui self-cmplete

You are not signed in. Login or sign up in order to post.