[Resuelto] Custom autocomplete input field with post titles array

[Autor]

Mensajes

[jorgel-4]

Hello, I have an input like this:

<div class="autocomplete">
<input id="que-necesitas" type="text" name="servicio" placeholder="¿Qué servicio necesitas?">
</div>

And a JS script like this:

<script>
var listado_de_servicios = ["Servicio 1","Servicio 2","Servicio 3"];

function autocomplete(inp, arr) {
...
}

autocomplete(document.getElementById("que-necesitas"), listado_de_servicios);
</script>

This is working fine, but I wan't the array "listado_de_servicios" to be dynamically generated with titles from CPT "servicios".

I found this at the forum https://toolset.com/forums/topic/get-fiels-array-from-custom-post-type/ and get it like (I'm not sure if it's ok) this:

function fb_listado_de_servicios() {
$options = array();

$args = array(
'post_type' => 'servicios',
'post_status' => 'publish'
);

$posts_array = get_posts( $args );

foreach ($posts_array as $post) {
$title = get_the_title($post->ID);

$options[ ] = $title;

}

return $options;
}

But I don't know how to integrate it with the script. Do I put it at functions.php and then call it from the script? How?

Thanks in advance

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To combine the script with some dynamic values coming from the PHP code, you can register a custom shortcode.

For example:

add_shortcode('output_for_dynamic_script', 'output_for_dynamic_script_func');
function output_for_dynamic_script_func($atts) {

	$a = shortcode_atts( array(
		'type' => '',
	), $atts );

	$list_string = array();

	// get all the posts from the target CPT
	$args = array(
		'post_type'        => $a['type'],
		'posts_per_page'   => -1,
		'post_status'      => 'publish',
	);

	$posts_array = get_posts( $args );

	foreach ($posts_array as $post) {
		$list_string[] = '"'.$post->post_title.'"';
	}

	ob_start(); ?>

	<script>
		var listado_de_servicios = [<?php echo implode(",", $list_string); ?>];

		function autocomplete(inp, arr) {
		...
		}

		autocomplete(document.getElementById("que-necesitas"), listado_de_servicios);
	</script>

	<?php return ob_get_clean();
	
}

The above custom shortcode gets the titles from all the published posts from the target CPT and then sets them in the scripts array "listado_de_servicios".

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

After that, you can include this custom shortcode on the page, where you'd like to include this autocomplete script, like this:

[output_for_dynamic_script type="service"]

Note: Please replace "service" with the post-type slug of your target CPT.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[jorgel-4]

Thank you so much, it's working perfectly!

[jorgel-4]

Sorry, it is working ok at the body of my pages but not at footer.

The shortcode function is nor running, at front-end I see it just like that: [output_for_dynamic_script type="servicios"]

I'm using Elementor to build the footer.

I tested it at header and the same happens.

I also tested using the shortcode once on a page (not in body and footer) but doesn't work anyway.

Do you know what could be happening?

[jorgel-4]

I changed the HTML widget to shortcode widget and the ID of the footer input field and worked!