How to access form element in javascript function?

Question

I'm trying to access an element in javascript function so as to autocomplete the user search, using autocomplete API.
It is not working as the JS code is not able to access that element. My javascript code:

<script>
$(function() {
  $("#q").autocomplete({
    source: "/api/get_drugs/",
    minLength: 2,
  });
});
</script>

My reference for search.

My Form:

<form id = "myForm" method="GET" action="{% url 'search' %}">
    <input style="width:340px;height:37px;" size="30" type="text" id = 'q' name = 'q' placeholder="Search products or categories"/>
    <input type="submit" value="Search" >
</form>

Here the input target field has id and name- 'q'.

Can you explain what the issue is? How does the code fail? Are you getting any error messages in the console? — user5734311
– user5734311, Commented Sep 14, 2019 at 10:55
You've changed the selector from '#drugs' to '#q' now. Does that not fix the problem? — Andy
– Andy, Commented Sep 14, 2019 at 10:55
I;m not getting error, just that it is not being loaded( the javascript function is somehow not working), because it's not able to access that element. — Ganesh Jadhav
– Ganesh Jadhav, Commented Sep 14, 2019 at 10:56

Pushprajsinh Chudasama · Accepted Answer · 2019-09-14 13:02:23Z

The bellow code works perfect . Now make sure that the response you are getting from the api is an array .

Or else do one thing , store the response of API in some variable and assign that variable to key Source .
For example :

source : apiResponseVariable //must be array .

$(function() {
  $("#q").autocomplete({
    source: ["hello" , "how"],
    

  });
});

<!DOCTYPE html>
<html lang="en">
<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>GnG</title>
</head>
<body>
	<form id = "myForm" method="GET" action="{% url 'search' %}">
    <input style="width:340px;height:37px;" size="30" type="text" id='q' name = 'q' placeholder="Search products or categories"/>
    <input type="submit" value="Search" >
</form>

</body>
</html>

You can checkout my running run .

Collectives™ on Stack Overflow

How to access form element in javascript function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related