-
-
Save weaverryan/bb95f063895c546c471ad609ee8bf6cd to your computer and use it in GitHub Desktop.
Quick auto-complete example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# just render your form like normal #} | |
{# here is some example JavaScript #} | |
{# I'm using https://select2.github.io/ - it's version 3.5.2, so the below code will probably need to be updated for version 4! #} | |
<script type="text/javascript" src="{{ asset('assets/vendor/select2/select2.min.js') }}"></script> | |
<script type="text/javascript"> | |
jQuery(document).ready(function() { | |
$('.js-autocomplete-scientists').select2({ | |
placeholder: "Search some scientists", | |
minimumInputLength: 1, | |
multiple: true, | |
ajax: { | |
url: '{{ path('api_genus_scientist') }}', | |
dataType: 'json', | |
data: function (term, page) { | |
return { | |
q: term, // search term | |
page: page | |
}; | |
}, | |
results: function (data, page) { | |
return {results: data.scientists}; | |
} | |
}, | |
initSelection: function(element, callback) { | |
// get an array of the ids | |
var ids = []; | |
$(element.val().split(",")).each(function () { | |
ids.push(this); | |
}); | |
// send an AJAX to get the user information | |
$.ajax('{{ path('api_genus_scientist') }}', { | |
data: { | |
ids: ids | |
}, | |
dataType: "json" | |
}).done(function(data) { | |
// pass the array of users to the callback to continue | |
callback(data.scientists); | |
}); | |
}, | |
formatResult: formatScientistResult, | |
formatSelection: formatScientistSelection | |
}); | |
}); | |
function formatScientistResult(scientist) | |
{ | |
return '<div>'+scientist.username+'</div>'; | |
} | |
function formatScientistSelection(scientist) | |
{ | |
return scientist.username; | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
services: | |
hidden_multiple_entity_type: | |
class: Knp\UniversityBundle\Form\Type\HiddenMultipleEntityType | |
arguments: | |
- '@doctrine.orm.entity_manager' | |
tags: | |
- { name: form.type } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// inside the controller, create the API action for auto-complete | |
public function listJsonAction(Request $request) | |
{ | |
$q = $request->query->get('q'); | |
if ($q) { | |
$users = $this->getDoctrine()->getManager() | |
->getRepository('AppBundle:User')->searchByUsername($q); | |
} elseif ($ids = $request->query->get('ids')) { | |
$users = $this->getDoctrine()->getManager() | |
->getRepository('AppBundle:User')->findByIds($ids); | |
} else { | |
throw new BadRequestHttpException('Invalid filtering parameters'); | |
} | |
$data = array('scientists' => array()); | |
foreach ($users as $user) { | |
$data['scientists'][] = array( | |
'id' => $user->getId(), | |
'username' => $user->getUsername(), | |
); | |
} | |
return new JsonResponse($data); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// inside buildForm() | |
$builder | |
->add('authors', HiddenMultipleEntityType::class, array( | |
'class' => 'AppBundle:User', | |
'attr' => ['class' => 'js-autocomplete-scientists'] | |
)) | |
; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment