Why does jQuery autocomplete input break with runat?

I am trying to use a simple jQuery autocomplete input in my Asp.Net web application:

Summary.aspx

 <script type="text/javascript">
    $(function () {
        var cityList = <%= new JavaScriptSerializer().Serialize(ViewState["Cities"]) %>;
        $( "#uxCities" ).autocomplete({
            //source: availableTags
            source: cityList
        });
    });
</script>
...
<div class="ui-widget">
  <asp:Label for="Cities">City </asp:Label>
  <input id="Cities">
</div>

This solution works fine on the client-side. However, I need to grab whatever value/text the user enters in the input in the .cs/C# file as well. When I add runat="server" to <input id="Cities">, the jQuery breaks. Additionally, input doesn't seem to have an attribute that allows me to grab what the user enters like a texbox (ex: string userCity = uxCities.Text;). How can I get the jQuery autocomplete functionality on the client-side but still utilize the input value on the server-side?

You need to fetch the client id of the textbox like this:

<input id="Cities" runway=“server” />

$('#<%=Cities.ClientID%>').autocomplete({..});