I am trying to use with react autocomplete but I do not see why there is no way to set a preselected value marked as checked before open page or popup because it is not refreshing this also in opened I cannot make the item checked because it does not update the values in view!
here my code
const onPageInit = () => {
console.log('onPageInit');
const $ = f7.$;
// Standalone With Ajax
autocompleteStandaloneAjax.current = f7.autocomplete.create({
openIn: 'page', // open in page
openerEl: '#autocomplete-brand a', // link that opens autocomplete
multiple: false, // allow multiple values
valueProperty: 'id', // object's "value" property name
textProperty: 'name', // object's "text" property name
limit: 50,
requestSourceOnOpen: true,
preloader: true, // enable preloader
closeOnSelect: false, // go back after we select something
source(query, render) {
const autocomplete = this;
const results = [];
/*if (query.length === 0) {
render(results);
return;
}*/
// Show Preloader
autocomplete.preloaderShow();
// Do Ajax request to Autocomplete data
const variables = {
limit: 500,
};
const result = client.graphql({
query: listBrands.replaceAll("__typename", ""),
variables
})
.then((res) => {
console.log({res});
var items = res?.data?.listBrands.items;
for (let i = 0; i < items; i += 1) {
if (items[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(items[i]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
});
},
on: {
opened(type, el) {
const ac = this;
const app = ac.app;
const $el = $(el);
console.log({ac, app, $el, type})
ac.value = [ac.items[5]] //I tried to set this manually here because from the html code is not passing it and changes the value in console but not in view
ac.updateValues(); //does not update anything in view only if I close and open again I see the pre selected item checked
},
change(value) {
const itemText = [];
const inputValue = [];
for (let i = 0; i < value.length; i += 1) {
itemText.push(value[i].name);
inputValue.push(value[i].id);
}
// Add item text value to item-after
$('#autocomplete-standalone-ajax').find('.item-after').text(itemText.join(', '));
// Add item value to input value
$('#autocomplete-standalone-ajax').find('input').val(inputValue.join(', '));
},
},
});
....
}
in the page I use the react component and if I set After it shows the item name correctly but the value is not being passed also in the hidden input not passing to the autocomplete value!
<ListItem link="#" id="autocomplete-brand"
title="Brand"
after={Brand ? Brand.brandTitle :''}
value={Brand ? Brand : ''}
valueProperty={Brand ? Brand.id : ''}
textProperty={Brand ? Brand.brandTitle : ''}>
<input type="hidden" value={Brand ? Brand.id : ''} />
</ListItem>
so how do I to set pre selected value to mark an item checked on opened autocomplete?
any ideas?
thanks