We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The Query 2 is solved, thanks so much.
But the Query 1, I'm sorry I wasn't express my ideas clearly.
I really like the idea which post the key value to the server, it would help for increase system flexibility. And it maybe could be used like "Tags", to record the user's choice, save it as a key value in database.
Take this case you give as an example:
I change the CarsList class:
public class CarsList
{
public string uniqueKey { get; set; }
public string text { get; set; }
public string company { get; set; }
}
And the controller:
List<CarsList> cars = new List<CarsList>();
public ActionResult AutocompleteFeatures()
{
cars.Add(new CarsList { uniqueKey = "1", text = "Audi S6", company = "Audi" });
cars.Add(new CarsList { uniqueKey = "2", text = "Austin-žHealey", company = "Austin" });
cars.Add(new CarsList { uniqueKey = "3", text = "BMW š7", company = "BMW" });
cars.Add(new CarsList { uniqueKey = "4", text = "Chevrolet Camarož", company = "Chevrolet" });
cars.Add(new CarsList { uniqueKey = "6", text = "Ferrari š360", company = "Ferrari" });
cars.Add(new CarsList { uniqueKey = "7", text = "Honda S2000", company = "Honda" });
cars.Add(new CarsList { uniqueKey = "8", text = "Hyundai Santroš", company = "Hyundai" });
cars.Add(new CarsList { uniqueKey = "9", text = "Isuzu Swift", company = "Isuzu" });
cars.Add(new CarsList { uniqueKey = "10", text = "Jaguar XJS", company = "Jaguar" });
cars.Add(new CarsList { uniqueKey = "11", text = "iLotus Esprit", company = "Lotus" });
cars.Add(new CarsList { uniqueKey = "12", text = "Mercedes-Benz", company = "Mercedes" });
cars.Add(new CarsList { uniqueKey = "13", text = "Toyota ž2000GT", company = "Toyota" });
cars.Add(new CarsList { uniqueKey = "14", text = "Volvo P1800", company = "Volvo" });
ViewBag.datasource = cars;
var model = new Story {
//Name = "Audi S6"
Name = "1"
};
return View(model);
}
To achieve this function, now have a problem is when I return a model to the view, the AutocompleteFor display the string not compile as the viewbag datasource gave.
I want I could use only the key value from the client to the server and back to the client.
Thank you,
Best regards.
|
@Html.EJ().AutocompleteFor(x => x.Name, new Syncfusion.JavaScript.Models.AutocompleteProperties()
{
DataSource = (IEnumerable<CarsList>)ViewBag.datasource,
AutocompleteFields = new AutocompleteFields() { Text = "text", Key = "uniqueKey" }
}
).MultiSelectMode(MultiSelectModeTypes.VisualMode).ShowPopupButton(true).Width("100%").ClientSideEvents(c => c.Select("onSelect").Create("onCreate"))
<script>
function onCreate(args) {
this.clearText(); // clears the Autocomplete values
this.setModel({selectValueByKey:@Model.Name})//setting the text value based on keyvalue got
}
</script>
|
Hello, Arun
Thanks for this solution, it work well.
But I have to add a new issue about AllowAddNew.
If I set the AllowAddNew(true), it will create a new value to the autocomplete input but have no key value.
So I need a function when I create a new text value, it will post the only new text value to the server, then save it and get the key value back to the client, and use AJAX success function to push the back data object to the ejAutocomplete's dataSource.
Thank you so much
Best regards.
|
function onSelect(args){
textval = args.value;
if(args.text.indexOf('Add New') >= 0){
var newval = args.text.replace('(Add New)','');
$.ajax({
url: '@Url.Action("Autocompletenewtext", "Autocomplete")',
data: { stringtextnew: newval.trim() },
type: 'POST',
dataType: "json",
success: function (response) {
var ac = $("#Name").ejAutocomplete("instance");
ac.model.dataSource.push({text:response[0].text,uniqueKey:response[0].uniqueKey,company:response[0].company});
ac._doneRemaining();
}
});
}
}
[HttpPost]
public ActionResult Autocompletenewtext(Story model, string stringtextnew)
{
cars.Add(new CarsList { uniqueKey = 15, text = stringtextnew, company = "Newcompany" }); // Give your key value here
return Json(cars);
}
|
