Topic: Autocomplete with object

josefranco pro asked 5 years ago


Good morning.

I'd like to modify the mdb-autocomplete function in order to work with object properties instead strings. I get the object from an associative array from a query with the terms of search and then I use json_encode.

The object has two properties, value and text. I wand to display the text in a link that will send the value of the object. Something like this in line 33 of mdb-autocomplete.js:

 let option = $(`<li><a href="target.php?id=${data[item.value]}">${data[item.text]}</a></li>`);


Mikołaj Smoleński staff answered 5 years ago


Hello,

I've prepared autocomplete with objects snippet especially for You.

https://mdbootstrap.com/snippets/jquery/mikolaj-smolenski/162961

Best Regards


josefranco pro commented 5 years ago

Thank you very much.

I download the snippet and it works, I'm able to search a display the results, but I'm stuck trying to send the value of the text to another page.

In the snippet on modules folder, the file mbd-autocomplete.js has the next instruction:  var option = $("<li>".concat(data[item], "</li>"));

I'm trying to put a link within the li element with the value of the text showed:  var option = $("<li><a href='target.php?id=XXXXXXXX' >".concat(data[item], "</a></li>"));   

Where XXXXX is the value I want to send.


Mikołaj Smoleński staff commented 5 years ago

I'm not sure what is Your problem. You get the value like this in the snippet:
let value = search.find(x => x.text === $(this).html()).value;

Then You can do whatever You want with it, including addition to the link.

Best Regards


josefranco pro answered 5 years ago


I made it this way. I use for searching users, and send the data to a php page that receives the the parameter id usig the GET/REQUEST method.

while ($row = mysqli_fetch_array($sql))
{
$json[] = array('value' => $row['xxx'], 'text' => "<a href='zzzzz.php?id=" . $row['xxxx'] . "'>" .$row['name'] . " " . $row['surname'] . "</a>");
}

var search = <?php echo json_encode($json); ?>;

And then the code of the snippet and replace mdb_autocomplete.js with the mdb_autocomplete.js included when you download the snippet.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrome
  • OS: Mint
  • Provided sample code: No
  • Provided link: No