jQuery:在以输入为中心填充自动填充

时间:2015-07-11 09:16:20

标签: javascript jquery autocomplete

我无法弄清楚如何动态填充输入的自动完成列表。这是一些测试代码:

<input id="AnlNr">

[....]

var AnlNrTags = ["five","six","seven","eight"];

jQuery( "#AnlNr" )
    .autocomplete({
        source: AnlNrTags,
        }
     })

     .focus(function() {
         AnlNrTags = ["one","two","three","four"];
     });

自动填充填充“五”,“六”,“七”,“八”。好。现在当输入被聚焦时,我想要它“一个”,“两个”,“三个”,“四个”,但自动完成选择仍然像以前一样。似乎自动完成小部件不是为初始化后重新评估自动完成源而设计的。

如何更改.focus中的自动选择列表?

THX

阿丽娜。

2 个答案:

答案 0 :(得分:1)

要在初始化后更改自动填充的source属性,您需要使用option属性调用它。试试这个:

.focus(function() {
    AnlNrTags = [ "one", "two", "three", "four" ];
    jQuery("#AnlNr").autocomplete('option', 'source', AnlNrTags);
})

Example fiddle

请注意,您的模式有点偏差。如果source元素集中,则input会更改five,这意味着永远不会看到第一组选项sixusing System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net; using System.Net.Http; using System.Net.Mime; using System.Text; using System.Web.Http; using System.Web.Http.Filters; using System.Web.Services.Description; namespace Web.Controllers.WebApi { public class TestController : ApiController { public static List<Customer> Customers; static TestController() { Customers = new List<Customer>() { new Customer() {Id = 1, Name = "person1"}, new Customer() {Id = 2, Name = "person2"}, }; } [ApiExceptionFilterAttribute] public IHttpActionResult Get(int id) { if (Customers != null) { var customer = Customers.FirstOrDefault(x => x.Id == id); if (customer == null) { throw new CustomerNotExistsException(id); } return Ok(customer); } return InternalServerError(); } } public class Customer { public int Id { get; set; } public string Name { get; set; } } public class ApiExceptionFilterAttribute : ExceptionFilterAttribute { public override void OnException(HttpActionExecutedContext actionExecutedContext) { if (actionExecutedContext.Exception is CustomerNotExistsException) { throw new HttpResponseException(actionExecutedContext.Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ((CustomerNotExistsException)actionExecutedContext.Exception).Message)); } else { //genenral 500 error //log exception } } } public class CustomerNotExistsException : HttpResponseException { public int CustomerId { get; set; } public string Message { get; set; } private const string message = "customer id {0} not found"; public CustomerNotExistsException(int customerId) : base(new HttpResponseMessage()) { CustomerId = customerId; Message = string.Format(message, customerId); } public CustomerNotExistsException(int customerId, string message) : base(new HttpResponseMessage()) { CustomerId = customerId; Message = message; } } } 等。

答案 1 :(得分:0)

试试这个,

$(function() {
    $('#in1').autocomplete({
        source: ["five","six","seven","eight"],
        minLength: 0
    }).focus(function(){
        var newtag = [ "one", "two", "three", "four" ];
        $("#in1").autocomplete('option', 'source', newtag);           
       $("#in1").data("autocomplete").search($(this).val());
    });
});

DEMO

Look into second demo where merging both values. DEMO-2