I am currently utilizing an autocomplete field that needs to fetch data from a MySQL database based on a PHP (YII2) action. The autocomplete field is currently being populated statically. Below is the code used to populate the autocomplete field:
app.controller('DemoCtrl', DemoCtrl);
function DemoCtrl($timeout, $q) {
var self = this;
// list of `state` value/display objects
self.states = loadAll();
self.selectedItem = null;
self.searchText = null;
self.querySearch = querySearch;
// ******************************
// Internal methods
// ******************************
/**
* Search for states... use $timeout to simulate
* remote dataservice call.
*/
function querySearch(query) {
var results = query ? self.states.filter(createFilterFor(query)) : self.states;
var deferred = $q.defer();
$timeout(function () {
deferred.resolve(results);
}, Math.random() * 1000, false);
return deferred.promise;
}
/**
* Build `states` list of key/value pairs
*/
function loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
return allStates.split(/, +/g).map(function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}
In the function loadall(), I need to fetch values from my database, which are returned from my YII2 controller action. It can be accessed via URL. My controller action is as follows:
public function actionGetAllPackages()
{
$packages = \common\models\Packages::find()
->select('name')
->all();
$name = "";
foreach ($packages as $package)
{
$name = $name.', '.$package->name;
}
$name = substr($name, 2);
echo addslashes($name);
}
How can I retrieve the value printed in the controller action within the Angular function? Please help. This is my first time using YII2 and Angular.
Thanks in advance