question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

autocomplete not working on input forcus

See original GitHub issue

[x] bug Framework7 Version: v1.5.2 Platform and Target: CORDOVA.

What you did

	var autocompleteTitle = myApp.autocomplete({
		  input: '#title-search',
		  openIn: 'dropdown',
		  updateInputValueOnSelect: true,
		  preloader: false, //enable preloader
		  valueProperty: 'item_uid', //object's "value" property name
		  textProperty: 'title', //object's "text" property name
		  limit: 6, //limit to 20 results
		  expandInput: false, // expand input
		  dropdownItemTemplate:  droptem,
		  onChange: function(value, autocomplete) {
			$$('#location-search').val(autocomplete.city);
			$$('#form-location-search .s-clear').css('opacity', '.6');

			searchItems();
		  },
		  source: function (autocomplete, query, render) {
			  var results = [];
			  if (query.length === 0) {
				  render(results);
				  return;
			  }
			  // Show Preloader
			  autocomplete.showPreloader();
			  // Do Ajax request to Autocomplete data
			  var locationsearch = $$('#location-search').val().toLowerCase();
		  
			  if (locationsearch === '') {
				 var loc = 'Worldwide';
			  } else {
				var loc = locationsearch;
			  }
		  		  
			  $$.ajax({
				  url: 'Url',
				  method: 'GET',
				  dataType: 'json',
				  //send "query" to server. Useful in case you generate response dynamically
				  data: {
					  title: query,
					  location: loc
				  },
				  success: function (data) { 
					  // Find matched items
					  for (var i = 0; i < data.length; i++) {
						  if (data[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
					  }
					  // Hide Preoloader
					  autocomplete.hidePreloader();
				  
					  // Render items by passing array with result items
					  render(results);
					 for (var i = 0; i < data.length; i++) {
						$$('.autocomplete-dropdown').find('.item-content[data-value="'+data[i].item_uid+'"]').find('.item-location').text(data[i].city+', '+data[i].country);

					}
				  },
				  timeout: 10000
			  });
		  }
	});

Expected Behavior

Users can press the clear button on input boxes and it will focus on the input field and activate the autocomplete.

Actual Behavior

When using searchbar and autocomplete together, if I click class .searchbar-clear, the focus is on the searchbar however if i continue to type again the autocomplete no longer reopen although it’s still making Ajax call as it did before clear.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8

github_iconTop GitHub Comments

1reaction
valnubcommented, Mar 7, 2017

I think we can close this if there is no response within the next few days.

0reactions
lock[bot]commented, Jun 24, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ajax AutoComplete autoFocus not working with .Focus
When I click on the input text box that the AutoComplete is attached to I want the AutoComplete list to appear unfiltered (before...
Read more >
Set focus on input field with autocomplete in angular
Example code snippet showing how to set focus on input field with autocomplete in angular material.
Read more >
[Autocomplete] openOnFocus is not working properly #20286
In the issue's description, the popup is open by a click event on the <input> , not by the focus event. So it...
Read more >
Autocomplete option not selected when input is not focused
Do not make a focus on input; Click "Search" button; Select the very last position from suggestion. If you have very big screen...
Read more >
The problem with autocomplete and how to fix it
Every time a user types on the input box, the state of the page changes: the results from autocomplete are updated and presented...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found