javascript - Jquery Autocomplete Chained Requests - Stack Overflow

admin管理员组

文章数量:1297055

I have a page with two input fields City and Venue. I have the autoplete plugin from Devbridge working great for the city field. I now want to get it working on the venue field. The javascript I have so far is:

<script type="text/javascript">
    $(document).ready(function() {
        $('#Event_City').autoplete({
          serviceUrl: '<%=Url.Action("GetCities", "Search") %>',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { country: 'Yes' },
        });
        $('#Event_Venue').autoplete({
          serviceUrl: '<%=Url.Action("GetVenues", "Search") %>',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { city: $("#Event_City").val() },
        });
    });      
</script>

The second autoplete passes an additional paramter (city) to the action on my controller. I will then use this to restrict my responses to venues in that city. This paramter is received but does not contain the current value entered in #Event_City. Instead it contains the default value.

Does anyone know how to evaluate the value when the autoplete gets called?

I am just starting out with Javascript so please be gentle.

Thanks,

I have a page with two input fields City and Venue. I have the autoplete plugin from Devbridge working great for the city field. I now want to get it working on the venue field. The javascript I have so far is:

<script type="text/javascript">
    $(document).ready(function() {
        $('#Event_City').autoplete({
          serviceUrl: '<%=Url.Action("GetCities", "Search") %>',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { country: 'Yes' },
        });
        $('#Event_Venue').autoplete({
          serviceUrl: '<%=Url.Action("GetVenues", "Search") %>',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { city: $("#Event_City").val() },
        });
    });      
</script>

The second autoplete passes an additional paramter (city) to the action on my controller. I will then use this to restrict my responses to venues in that city. This paramter is received but does not contain the current value entered in #Event_City. Instead it contains the default value.

Does anyone know how to evaluate the value when the autoplete gets called?

I am just starting out with Javascript so please be gentle.

Thanks,

• javascript
• jquery
• asp-mvc
• autoplete

Share Follow asked May 12, 2009 at 18:11 madcapnmckaymadcapnmckay 16k66 gold badges6363 silver badges7878 bronze badges 1

• I was about to ask the same thing. I was trying to pass the parameter 'normally', but I guess the field doesn't get updated without using the onchange event. – Adriano Varoli Piazza Commented Aug 24, 2009 at 18:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

@Ian Mckay - In order to get the AutoComplete for the Venue to filter based on the City, you need to bind in the "change" event of the City as follows:

$(document).ready(function() {
    $('#Event_City').autoplete({
      serviceUrl: '',
      minChars:2,
      width: 300,
      delimiter: /(,|;)\s*/,
      deferRequestBy: 150, //miliseconds
      params: { country: 'Yes' },
    }).change(function(){
        $('#Event_Venue').autoplete({
          serviceUrl: '',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { city: $("#Event_City").val() }
        });
    }); 
}); 

The reason it contains the default value is because the autoplete is attached to the textbox when the page is loaded. In order for it to be updated with the new value, the plugin would need to provide a way for you to update properties of it's parameter object or allow you to destroy it on the second element and then rebuild it every time the user changes the first one's value. The AutoComplete library you chose looks pretty lightweight (not always a bad thing... just in your case it is...) and doesn't seem to support this functionality.

My best suggestion for you would be to try another library. I tend to like this one very much as it's quite versatile (demo page):

http://view.jquery./trunk/plugins/autoplete/demo/

本文标签： javascriptJquery Autocomplete Chained RequestsStack Overflow