jQuery自动完成值未传递到Django表单

Question

I am trying to get a textInput from Form where in I am pulling values from Jquery Autocomplete. But the selected value is not being passed to form. What am I missing.

 $(function() { var availableTags = ['Software Engineer', 'Project manager']; $("#id_j_title").autocomplete({ source: availableTags }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <form id="search-form" method="POST" action="."> <p> <label for="id_j_title">Enter a keyword for the job title for the new application:</label> <input id="id_j_title" maxlength="11" name="j_title" type="text" /> </p> And Please enter a keyword to search for <input type="submit" value="Select" /> <button>Back</button> </form> 

Answer 1

If you have specified maxlength attribute in django form then this might be the reason as your maxlength value(11) in django is less than populated form data(one of the two strings shown in example) after autocomplete. Django form validates data after it receives data from browser. Try to increase maxlength value in django form. If you have length constrain then please follow below url to filter out autocomplete options based on length.

https://forum.jquery.com/topic/autocomplete-30-4-2010

Answer 2

max_length is causing problem here, as identified by Amit Dhar. Either remove it, or increase its value to a number that will easily accommodate the values of titles.

 <form id="search-form" method="POST" action=".">
  <p>
<label for="id_j_title">Enter a keyword for the job title for the new application:</label>
<input id="id_j_title" maxlength="20" name="j_title" type="text" />
</p>
And Please enter a keyword to search for
<input type="submit" value="Select" />
<button>Back</button>
</form>